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操纵Cookie实现购物车程序
Nov 23 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 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中array_column函数简单实现方法
2016/07/11 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
js 函数的副作用分析
2011/08/23 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
加速vue组件渲染之性能优化
2020/04/09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python hough变换检测直线的实现方法
2019/07/12 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
高三英语复习计划
2015/01/19 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android