Javascript 绘制 sin 曲线过程附图


Posted in Javascript onAugust 21, 2014

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>

Javascript 绘制 sin 曲线过程附图

动态效果:

<!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常用函数归纳整理
Oct 31 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
json字符串之间的相互转换示例代码
Aug 21 #Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 #Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 #Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 #Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 #Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 #Javascript
使用时间戳解决ie缓存的问题
Aug 20 #Javascript
You might like
linux下安装php的memcached客户端
2014/08/03 PHP
php中explode函数用法分析
2014/11/15 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python实现列表的排序方法分享
2019/07/01 Python
pycharm配置git(图文教程)
2019/08/16 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
全球性的女装店:storets
2019/06/12 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
入股协议书范本
2014/04/14 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
验房委托书
2014/08/30 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党员违纪检讨书
2015/05/05 职场文书
Python读写yaml文件
2022/03/20 Python