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 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
javascript验证身份证号
Mar 03 Javascript
再谈JavaScript线程
Jul 10 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
php中目录,文件操作详谈
2007/03/19 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
微信小程序实现星级评价效果
2018/12/28 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python 如何提高元组的可读性
2019/08/26 Python
Python包和模块的分发详细介绍
2020/06/19 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
倡议书范文
2014/04/16 职场文书
语文教育专业求职信
2014/06/28 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
Python实现照片卡通化
2021/12/06 Python