H5学习之5 canvas的运用_H5之家 - 中国HTML5教程资源分享第一站

H5学习之5 canvas的运用

<!DOCTYPE html> <html > <body> <canvas >  </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); /*获取画布myCanvas，c也就变成了myCanvas*/ var cxt= c.getContext("2d"); /*创建画布上的画笔cxt。通过cxt= c.getContext("2d")创建了在c上的画笔，也就是在myCanvas上的画笔*/ cxt.moveTo(10,10);/*将画笔点移动到10，10*/ cxt.lineTo(150,50);/*从10，10画一条线到150,50,此时画笔坐标也就移动到了150，50*/ cxt.lineTo(10,50); cxt.stroke();/*结束路径，必须有的*/ </script> </body> </html>具体效果如下

思路解释：

在body里创建canvas标签，就是画布。

<canvas >  </canvas>然后在script里书写画画函数，首先获取创建的canvas 的id myCanvas，也就是获取了canvas。

var c=document.getElementById("myCanvas"); /*获取画布myCanvas，c也就变成了myCanvas*/接着创建一个跟 myCanvas绑定的画笔，通过画笔函数来画出图像。

var cxt= c.getContext("2d"); /*创建画布上的画笔cxt。通过cxt= c.getContext("2d")创建了在c上的画笔，也就是在myCanvas上的画笔*/ cxt.moveTo(10,10);/*将画笔点移动到10，10*/ cxt.lineTo(150,50);/*从10，10画一条线到150,50,此时画笔坐标也就移动到了150，50*/ cxt.lineTo(10,50); cxt.stroke();/*结束路径，必须有的*/

html5canvas

猜你在找