-
点阵图逻辑位置查看全部
-
canvas查看全部
-
canvs 笔记查看全部
-
var colorpiece =[ {p: [{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"green"}, {p: [{x:0, y:0}, {x:0, y:800}, {x:400, y:400}], color:"blue"}, {p: [{x:0, y:800}, {x:400, y:800}, {x:200, y:600}], color:"pink"}, {p: [{x:200, y:600}, {x:400, y:800}, {x:600, y:600}, {x:400, y:400}], color:"purple"}, {p: [{x:400, y:400}, {x:600, y:600}, {x:600, y:200}], color:"yellow"}, {p: [{x:600, y:200}, {x:600, y:600}, {x:800, y:400}, {x:800, y:0}], color:"red"}, {p: [{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#F8C82C"} ]; function draw(piece, context){ context.beginPath(); context.moveTo(piece.p[0].x, piece.p[0].y); for(var i=1; i<piece.p.length; i++){ context.lineTo(piece.p[i].x, piece.p[i].y); } context.closePath(); context.fillStyle=piece.color; context.fill(); } window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); for(var i=0; i<colorpiece.length; i++){ draw(colorpiece[i],context); } }查看全部
-
。查看全部
-
很不错查看全部
-
draw a line查看全部
-
123456查看全部
-
倒计时查看全部
-
很激动查看全部
-
圆心位置计算查看全部
-
使用canvas 绘制动画 setInterval(); 匿名函数 function(){ render(); 绘制当前画面 update(); 调整数据结构 }, 时间(毫秒)查看全部
-
1, 弧形路劲绘制 context.beginPath(); context.arc( centerX,centerY,radius, //圆心坐标和半径 startingAngle,endingAngle, //起始弧度值结束弧度值 anticlockwise = false //绘制方向， false顺时针，true逆时针 ); //这个同样只是路劲的绘制 context.stroke(); // 线圆弧 这里的绘制没有context.closePath();表示绘制弧形首尾不用线段连接 context.fillStyle = "#005588"; //设置填充颜色 context.fill(); //根据路劲和设置的颜色进行填充，填充的话会自动把路劲首位相连然后填充查看全部
-
var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"} ]; window.onload=function(){ var canvas=document.getElementById('canvas'); 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(); }查看全部
-
1.canvas常用的三个属性和方法： canvas.width=1024; canvas.height=768; canvas.getContext("2d"); 2.canvas绘图是状态绘制，即先设置好状态，再执行绘制，如： var context=canvas.getContext("2d"); context.moveTo(100,100); //相当于将笔尖移到该位置 context.lineTo(700,700); //相当于笔尖要从起始位置移动到的位置 context.stroke(); //执行绘制查看全部
举报
0/150
提交
取消