View Code

1 function draw0(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { ; 5 } 6 var context = canvas.getContext('2d'); 7 context.beginPath(); 8 context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); 11 context.fillStyle = 'rgba(0,255,0,0.25)'; 12 context.fill(); 13 }

一不小心画了小日本的国旗...赶紧调下颜色和大小，绿色倒是挺合适的~

路径  context.beginPath()    context.closePath()

    细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的 beginPath   和closePath方法，参考书不愧是参考书，例子给得太简单了，实话说一开始我凌乱了，耐心下来做了几个实验才舒缓蛋疼的心情

    实验代码如下，通过分别注释closePath 和beginPath看fill stoke 和fill stroke结合下画出来的两个1/4弧线达到实验效果

View Code

1 function draw23(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { ; 5 } 6 var context = canvas.getContext('2d'); 7 var n = 0; context.beginPath(); 11 context.arc(100, 150, 50, 0, Math.PI/2 , false); 12 context.fillStyle = 'rgba(255,0,0,0.25)'; 13 context.fill(); 14 context.strokeStyle = 'rgba(255,0,0,0.25)' 15 context.closePath(); 16 context.stroke(); context.beginPath(); 20 context.arc(300, 150, 50, 0, Math.PI/2 , false); 21 context.fillStyle = 'rgba(255,0,0,0.25)'; 22 context.fill(); 23 context.strokeStyle = 'rgba(255,0,0,0.25)'; 24 context.closePath(); 25 context.stroke(); 26 }

    实验结果如下：

 得出的结论有：*号为重点

    1、系统默认在绘制第一个路径的开始点为beginPath

    *2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

    3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

    ps：书本的结论是   如果没有closePath那么前面的路劲会保留，实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留

    ps1：如果你真心凌乱了，那么记住每次画路径都在前后加context.beginPath()   和context.closePath()就行

 绘制线段 context.moveTo(x,y)  context.lineTo(x,y)

    x:x坐标

    y:y坐标

    每次画线都从moveTo的点到lineTo的点，

    如果没有moveTo那么第一次lineTo的效果和moveTo一样，

    每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点

View Code