## Canvas画直线 ~~~ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.lineTo(100,200); //设置线条颜色 ctx.strokeStyle = "red"; ctx.stroke(); debugger; ctx.moveTo(100,0); ctx.lineTo(200,100); ctx.lineTo(200,200); //设置线条颜色 ctx.strokeStyle = "black"; ctx.stroke(); ~~~ ### 方法 1. moveTo(x,y) ---移动至某点 2. lineTo(x,y) ---画直线至某点 3. stroke() ---将内存中的路径画出来 > 上面代码第一跟线会被画两次，解决方法 > 1. 所有线画完之后，执行一次stroke()方法 > 2. 每条线开始绘制之前beginPtah() 4. beginPath()---将之前内存中的路径去掉