-
熟悉+定义查看全部
-
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:"#67bcef"}, {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:"#fa8ccc"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"} ];查看全部
-
window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); for(var i=0;i<tangram.length;i++){ draw(tangram[i],context); } } function draw(piece,cxt){ cxt.beginPath(); cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x,piece.p[i].y); } cxt.closePath(); cxt.fillStyle=piece.color; cxt.fill(); }查看全部
-
通常动画用set interval 进行一次渲染和数据更新查看全部
-
draw查看全部
-
draw查看全部
-
canvas不适合用css操作大小查看全部
-
context.arc(<br> centerx,centery,radius//圆心的坐标以及半径<br> startingAngle, endingAngle//开始弧度，结束弧度<br> anticlockwise = false;//默认false表示以顺时针绘制弧线,true表示逆时针绘制元<br> );<br> <br> startingAngle的位置为元右边的位置0,0.5π在元下边，1π在左边，1.5π在上边，2π和0重合<br> <br> context.closePath();会自动把不封闭的图形首尾连接起来<br> <br> beginpath 代表开始一个新路径<br> closepath 是结束当前路径，如果图形不是封闭的他就会封闭图形，解决办法是不使用closepath<br> [ 收起全文 ]查看全部
-
context.arc( centerx,centery,radius//圆心的坐标以及半径 startingAngle, endingAngle,开始于哪个弧度，结束于哪个弧度 anticlockwise = false;//false表示以顺时针绘制弧线,true表示逆时针绘制元 ); startingAngle的位置为元右边的位置0,0.5π在元下边，1π在左边，1.5π在上边，2π和0重合 context.closePath();会自动把不封闭的图形首尾连接起来 beginpath 代表开始一个新路径 closepath 是结束当前路径，如果图形不是封闭的他就会封闭图形，解决办法是不使用closepath查看全部
-
/使用canvas绘制直线 先设置绘制的状态 再画出线条<br> context.moveTo(100,100);<br> context.lineTo(700,700);<br> context.lineWidth=5 //线条宽度<br> context.strokeStyle="red";//线条颜色<br> context.stroke();//stroke是笔画的意思，所以画的都是直线<br> context.fillStyle="green";//填充颜色 context.fill();//进行填充查看全部
-
beginPath() 和 closePath() 无需成对出现 beginPath() 代表要重新绘制一个路径 closePath() 代表要结束当前路径，如果该路径不封闭，则使用直线将其封闭查看全部
-
ctx.arc( 300, 300, 200, 0, 1.5 * Math.PI, true ) 逆时针从0 - 1.5PI，画出来是 1/4圆 如需画为 3/4 圆，则需 ctx.arc( 300,300, 200, 0, 0.5*Math.PI, true)查看全部
-
初始化一个圆 0 / 0.5 PI / 1.5 PI / 2.0 PI 的位置 该位置固定，无论是顺时针还是逆时针都不会变查看全部
-
ctx.lineWidth - 定义线条宽度 ctx.strokeStyle - 定义线条样式 ctx.fillStyle - 定义填充样式 ctx.stroke() - 绘制线条 ctx.fill() - 填充查看全部
-
使用 ctx.moveTo(x,y) ctx.lineTo(x,y) 来绘制直线 多个路径，需在路径首尾使用 ctx.beginPath() 和 ctx.closePath()查看全部
举报
0/150
提交
取消