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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
python取代netcat过程分析
2018/02/10 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Django使用rest_framework写出API
2020/05/21 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
家长写给孩子的评语
2014/04/18 职场文书
服务标语大全
2014/06/18 职场文书
学生安全责任书范本
2014/07/24 职场文书
银行奉献演讲稿
2014/09/16 职场文书
工会文体活动总结
2015/05/07 职场文书
学会感恩主题班会
2015/08/12 职场文书
文明上网主题班会
2015/08/14 职场文书
python常见的占位符总结及用法
2021/07/02 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android