<!DOCTYPE html> <html > <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" > <!--创建画布canvas,并且设置其id,宽度,高度,样式 具体画东西的过程放在script标签里 --> </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 id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" > <!--创建画布canvas,并且设置其id,宽度,高度,样式 具体画东西的过程放在script标签里 --> </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();/*结束路径,必须有的*/