接着说PATH
一个实例 sin曲线 cos曲线和tan曲线。
代码
<!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>
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
