Javascript 绘制 sin 曲线过程附图
更新时间：2014年08月21日 09:05:48 投稿：whsnow
这篇文章主要介绍了Javascript 绘制 sin 曲线过程,需要的朋友可以参考下
Javascript 绘制 sin 曲线代码如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#MyCanvas {
background-color: cornflowerblue;
}
</style>
<script type="text/javascript">
function draw(){
var my_canvas = document.getElementById( "MyCanvas" );
var content = my_canvas.getContext( "2d" );
content.beginPath();
content.moveTo( 10, 100 );
for( var i = 1; i < 200; i += 0.1 ){
var x = i * 10;
var y = Math.sin( i ) * 10 + 100;
content.lineTo( x, y );
}
content.stroke();
content.closePath();
}
</script>
</head>
<body onload="draw()">
<canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>
动态效果：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#MyCanvas {
background-color: cornflowerblue;
}
</style>
<script type="text/javascript">
var i = 1;
var x = 1;
var y = 100;
function moveSin(){
var my_canvas = document.getElementById( "MyCanvas" );
var content = my_canvas.getContext( "2d" );
content.beginPath();
content.moveTo( x, y );
i += 0.1;
x = i * 10;
y = Math.sin( i ) * 10 + 100;
content.lineTo( x, y );
content.stroke();
content.closePath();
}
setInterval( moveSin, 10 );
</script>
</head>
<body onload="moveSin()">
<canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>
相关文章
这篇文章主要为大家详细介绍了微信小程序仿通讯录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
计时器提供了一 个可以将代码片段异步延时执行的能力，javascript生来是单线程的（在一定时间范围内仅一部分js代码能运行），计时器为我们提供了一种避开这种 限制的方法，从而开辟了另一条执行代码的蹊径。2015-07-07
这篇文章主要介绍了JavaScript动态设置div的样式的方法的相关资料,需要的朋友可以参考下2015-12-12
本文主要介绍了最常见和最有用的字符串相关的方法，具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02![innerText innerHTML的用法以及注意事项 [推荐]](//img.jbzj.com/images/xgimg/bcimg4.png)
innerText innerHTML的用法以及注意事项 [推荐]
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。2009-05-05
这篇文章主要给大家介绍了使用JS如何制作简单的ASCII图与单极图的相关资料，文中介绍的非常详细，并在文末给出了详细的示例代码，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要为大家详细介绍了如何简单实现js进度条加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了使用HTML5+Boostrap打造简单的音乐播放器 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
用javascript实现jquery的document.ready功能的实现代码
实现jQuery的document.ready功能js代码2009-11-11
功能说明：譬如在按某个button时，显示消息"Loading”，然后每隔一秒后后面加上"."，至一定数量的"."时如："Loading..."，再重置此消息为"Loading"，继续动态显示，直至按钮事件处理完成。2010-04-04
![innerText innerHTML的用法以及注意事项 [推荐]](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论