玩转html5canvas画图(2)

时间：2018-11-26

本文来自织梦

dedecms.com

View Code

1 function draw0(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext('2d'); 7 context.beginPath(); 8 context.arc(200, 150, 100, 0, Math.PI * 2, true); 9 //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果 10 context.closePath(); 11 context.fillStyle = 'rgba(0,255,0,0.25)'; 12 context.fill(); 13 }

内容来自dedecms

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

本文来自织梦

路径  context.beginPath()    context.closePath() 本文来自织梦

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

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

dedecms.com

织梦内容管理系统

View Code

1 function draw23(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext('2d'); 7 var n = 0; 8 9 //左侧1/4圆弧 10 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(); 17 18 //右侧1/4圆弧 19 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 }

实验结果如下：

织梦内容管理系统

copyright dedecms

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

copyright dedecms

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

dedecms.com

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

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

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

本文来自织梦

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

织梦好，好织梦

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

copyright dedecms

    x:x坐标

    y:y坐标 dedecms.com

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

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

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

共14页:

上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

下一页

上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解