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>
相关文章
JavaScript对象中的可扩展性指的是：是否可以给对象添加新属性。所有的内置对象和自定义对象显示的都是可扩展的，对于宿主对象，则由JavaScript引擎决定2022-11-11
javascript数组对象的slice方法从数组中分离出一个子数组，功能类似于字符串对象的substring方法。今天我们就来详细探讨下javascript的这个不太常用的slice()方法。2015-04-04
这篇文章介绍了Echarts.js实现水滴球和海洋效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
擦除效果在我们日常开发中也是时有见到的，通过擦除效果大大加强了与用户的交互性，所以下面这篇文章主要给大家介绍了利用js和canvas实现擦除效果的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-04-04
这篇文章主要介绍了javascript使用Promise对象实现异步编程的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了JavaScript类的继承多种实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了js实现登录注册框手机号和验证码校验的前端部分代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值。它是JavaScript中的第七种数据类型。本文将详细讲讲Symbol的使用，需要的可以参考一下2022-09-09
这篇文章主要为大家详细介绍了js仿小米二级菜单显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
JS中国标准时间转化为年月日时分秒'yyyy-MM-dd hh:mm:ss'的示例详解
这篇文章主要介绍了JS中国标准时间转化为年月日时分秒‘yyyy-MM-dd hh:mm:ss‘的相关知识,通过示例代码介绍了,Js各种时间转换问题（YYYY-MM-DD 时间戳 中国标准时间）,需要的朋友可以参考下2024-02-02
最新评论