注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐
GACHA精选

Html5 Canvas (2)  

2011-03-30 00:19:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

接着说PATH

一个实例 sin曲线 cos曲线和tan曲线。

如图
  Html5 Canvas (2) - zhenghaoju700 - zhenghaoju700 的博客?
不用解释了吧 红色的是sinx 黄色的是cosx 蓝色的是tanx曲线

代码

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas Path Grids</title>

</head>

<body>

 

<canvas id="c" height="600" width="850"></canvas>

 

<script type="text/javascript">

//画竖线

var c = document.getElementById("c");

var context = c.getContext("2d");

 

for(var x=0.5;x<800;x += 10){

context.moveTo(x,0);

context.lineTo(x,600);

}

//画横线

for(var y=0.5;y<600;y += 10){

       context.moveTo(0,y);

       context.lineTo(800,y);

}

//选择颜色

context.strokeStyle = "#ccc";

//渲染

context.stroke();

//XY坐标系

//开始新的路径

//y轴

context.beginPath();

context.moveTo(100,700);

    context.lineTo(100,50);

    context.moveTo(95,55);

context.lineTo(100,50);

context.lineTo(105,55);

    //x轴

context.moveTo(700,500);

    context.lineTo(0,500);

context.moveTo(695,495);

context.lineTo(700,500);

context.lineTo(695,505);

//选择颜色

    context.strokeStyle = "#000";

//渲染

context.stroke();

    //填充文字

context.font = "bold 16px sans-self";

context.fillText("x",710,490);

context.fillText("y",90,40);

context.fillText("0",80,520);

//画曲线 sin曲线

context.beginPath();

context.moveTo(100,500);

for(var x=100;x<700;x++){

context.lineTo(x,-100*Math.sin((x-100)*Math.PI/180)+500)

}

context.strokeStyle = "#FF0000";

context.stroke();

 

//画曲线 cos曲线

context.beginPath();

context.moveTo(100,400);

for(var x=100;x<700;x++){

context.lineTo(x,-100*Math.cos((x-100)*Math.PI/180)+500)

}

context.strokeStyle = "#FFFF00";

context.stroke();

 

//画曲线 tan曲线

context.beginPath();

context.moveTo(100,400);

for(var x=100;x<700;x++){

context.lineTo(x,-100*Math.tan((x-100)*Math.PI/180)+500)

}

context.strokeStyle = "#0000FF";

context.stroke();

</script>

 

</body>

</html>

  评论这张
 
阅读(171)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017