-
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo('100,100'); context.lineTo('700,700'); context.closePath(); context.lineWidth = 5; context.strokeStyle = "red"; context.fillStyle = "rgb(0,0,0)"; context.fill(); context.stroke();查看全部
-
实际是一个2维数组，1的时候是填充，0的时候是空白查看全部
-
顺序是冲右边是0，1.5π。。。。。查看全部
-
画圆，参数很明确查看全部
-
moveTo（x,y）开始位置 lineTo（x，y）结束位置查看全部
-
使用Canvas只需要两步查看全部
-
arc弧度标尺查看全部
-
用了closePath()，会用一条线段把起始位置链接起来查看全部
-
canvas七巧板2查看全部
-
canvas七巧板1查看全部
-
canvas查看全部
-
var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"} ]; window.onload=function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.width=800; canvas.height=800; for(var i=0;i<tangram.length;i++){ draw(tangram[i],context); } } function draw(piece,txt){ txt.beginPath(); txt.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ txt.lineTo(piece.p[i].x,piece.p[i].y); } txt.closePath(); txt.fillStyle=piece.color; txt.fill(); }查看全部
-
绘制多个图形时，最后一个stroke将绘制所有的状态点，样式也跟随最后的stroke样式改变，如果想要各不影响，可以在每个图形状态前后分别加上beginPath和closePath查看全部
-
不要用CSS来制定canvas的样式查看全部
-
我的性能优化代码也分享下，O(∩_∩)O~，有问题的话，请加好友，指教，谢谢 var cnt = 0; for(var i=0;i<ballArray.length;i++){ calBallPosition(ballArray[i]); //性能优化 if(ballArray[i].x + r > 0 && ballArray[i].x - r < 1200){ ballArray[cnt++] = ballArray[i]; } } //限制小球个数 ballArray.length = Math.min(300,cnt);查看全部
举报
0/150
提交
取消