<!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();/*结束路径，必须有的*/