-
canvas 是基于状态绘制的，即先定义状态，后绘制 1.起始 context.moveTo(100,100) 2.终止 context.lineTo(700,700) 3.线条 context.stroke() 4.线宽 context.lineWidth=5 5.颜色 context.strokeStyle='orange' 6.填充颜色 context.fillStyle = 'rgba(2,2,2,0.3)' 7.填充 context.fill() 8.既可填充，又可描边 9.声明开始路径 context.beginPath() 10.声明结束路径 context.closePath()查看全部
-
document.body这个标准是旧标准，document.documentElement是新标准。 document.body.clientHeight中的body改成documentElement。查看全部
-
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(); }查看全部
-
老师，遇到点问题，按照您这个弄完之后，如果这个网页一直放在那，小球会越来越多查看全部
-
得把document.body.clientHeight改为document.documentElement.clientHeight才能完全显示。document.body这个标准是旧标准，document.documentElement是新标准。查看全部
-
设圆的半径为R，圆与圆之间的间距为2px，所以圆所在的正方形格子的边长为2*（R+1）。 其中x表示起始的横坐标，y表示起始的纵坐标，i表示行数，j表示列数，因此： 第（i,j）个圆的圆心位置： CenterX：x+j*2*(R+1)+(R+1) CenterY：y+i*2*(R+1)+(R+1)查看全部
-
我做的动画已经完成了，可是小球的动画没实现！查看全部
-
html: <canvas id="canvas1" width="800" height="800"></canvas> canvas的宽高只能写在行内，同时决定画布分辨率的大小。css里面设定canvas的宽高并不是真正的大小，而是同比缩放 js: var canvas = document.getElementById("canvas1"); var context = canvas .getContext('2d');//绘图环境 若浏览器不支持canvas： 1 html <canvas>不支持canvas的内容</canvas> 2 js if(canvas.getContext('2d')){//判断浏览器是否支持canvas //支持 }else{ //不支持 alert(""); } 方法： canvas.width canvas.height canvas.getContext('2d')查看全部
-
搞定了~~~~~~查看全部
-
var TG =[ {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"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); for(var i=0; i<TG.length;i++) draw( tangram[i],context)} function draw( plece, cxt){ cxt.beginPath(); cxt.moveTo(plece.p[0].x,plece.p[0].y); for(var i=1;i<plece.p.length;i++) cxt.lineTo(plece.p[i].x,plece.p[i].y); cxt.closePath(); cxt.fillStyle=plece.color; cxt.fill(); }查看全部
-
如果想要更炫的话还有一种方法，这里都已经获取到了hours，minutes,seconds，何不把这三个”两位数“拼起来作为页面背景色（rgb）呢？在update中可以时时变化的哦查看全部
-
时间那块应该是new Date("2014,12,12 18:47:52")，chrome中这个能用查看全部
-
以π为单位，顺时针 分别为0pi，0.5pi，1pi，1.5pi ，这是固定的四个点位置，跟距离长短无关，所以不管是顺时针还是逆时针，这几个数的位置是不变的。查看全部
-
context.arc(centerx, centery, radius, startingAngle, endingAngle, anticlockwise = false)；(圆心x坐标，圆心y坐标，半径的值，从哪一个弧度值为开始，到哪一个弧度值结束，可选参数：默认顺时针方向绘制（false）， 逆时针方向绘制（true）)，查看全部
-
当不指定画布宽高时，页面的画布大小为：300px宽150px高查看全部
举报
0/150
提交
取消