玩转html5canvas画图(3)

时间：2018-11-26

本文来自织梦

copyright dedecms

1 function draw8(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 //context.beginPath(); 7 context.strokeStyle = "rgb(250,0,0)"; 8 context.fillStyle = "rgb(250,0,0)" 9 //实验证明第一次lineTo的时候和moveTo功能一样 10 context.lineTo(100, 100); 11 //之后的lineTo会以上次lineTo的节点为开始 12 context.lineTo(200, 200); 13 context.lineTo(200, 100); 14 context.moveTo(200, 50); 15 context.lineTo(100,50); 16 context.stroke(); 17 }

copyright dedecms

本文来自织梦

下面给出书本的例子，一朵绿色的菊花，涉及数学，不多解析，有兴趣的自己研究

本文来自织梦

1 function draw1(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = "#EEEEFF"; 7 context.fillRect(0, 0, 400, 300); 8 var n = 0; 9 var dx = 150; 10 var dy = 150; 11 var s = 100; 12 context.beginPath(); 13 context.fillStyle = 'rgb(100,255,100)'; 14 context.strokeStyle = 'rgb(0,0,100)'; 15 var x = Math.sin(0); 16 var y = Math.cos(0); 17 var dig = Math.PI / 15 * 11; 18 for (var i = 0; i < 30; i++) { 19 var x = Math.sin(i * dig); 20 var y = Math.cos(i * dig); 21 context.lineTo(dx + x * s, dy + y * s); 22 } 23 context.closePath(); 24 context.fill(); 25 context.stroke(); 26 27 }

织梦内容管理系统

内容来自dedecms

绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  织梦好，好织梦

绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

    cp1x:第一个控制点x坐标

dedecms.com

    cp1y:第一个控制点y坐标 copyright dedecms

    cp2x:第二个控制点x坐标 织梦好，好织梦

    cp2y:第二个控制点y坐标

    x:终点x坐标 本文来自织梦

    y:终点y坐标 织梦好，好织梦

    qcpx:二次样条曲线控制点x坐标 本文来自织梦

    qcpy:二次样条曲线控制点y坐标

dedecms.com

    qx:二次样条曲线终点x坐标 dedecms.com

    qy:二次样条曲线终点y坐标

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