-
不建议使用css来定义canvas的大小，建议直接在标签内使用width和height，因为css定义的是canvas的显示的大小。查看全部
-
初始化绘图查看全部
-
arc(頂點x座標,y座標,半徑長,開始位置,結束位置,是否為逆時鐘(預設為順)); beginPath()和closePath()不必成對出現 用了fill()即使沒有context.closePath();也會自動密合 如果沒有closePath()不會密合 0~2*Math.PI查看全部
-
模拟阻力，添加摩擦系数查看全部
-
碰撞检测查看全部
-
改变位置，形成抛物线查看全部
-
倒计时计算查看全部
-
//右中黃色三角形 context.beginPath(); context.moveTo(350,350); context.lineTo(525,525); context.lineTo(525,175); context.lineTo(350,350); context.closePath(); context.fillStyle="rgb(254,234,19)"; context.fill(); //正方行 context.beginPath(); context.moveTo(175,525); context.lineTo(350,700); context.lineTo(525,525); context.lineTo(350,350); context.lineTo(175,525); context.closePath(); context.fillStyle="rgb(168,152,198)"; context.fill(); } </script> </html>查看全部
-
//下面粉紅色 context.beginPath(); context.moveTo(0,700); context.lineTo(350,700); context.lineTo(175,525); context.lineTo(0,700); context.closePath(); context.fillStyle="rgb(255,156,207)"; context.fill(); //右下黃色三角形 context.beginPath(); context.moveTo(350,700); context.lineTo(700,700); context.lineTo(700,350); context.lineTo(350,700); context.closePath(); context.fillStyle="rgb(253,197,33)"; context.fill(); //右邊菱形 context.beginPath(); context.moveTo(700,0); context.lineTo(700,350); context.lineTo(525,525); context.lineTo(525,175); context.lineTo(700,0); context.closePath(); context.fillStyle="rgb(255,80,99)"; context.fill();查看全部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" > 當前樓覽器不支持 </canvas> </body> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=700; canvas.height=700; //天藍色三角形 context.beginPath(); context.lineTo(350,350); context.lineTo(0,700); context.lineTo(0,0); context.closePath(); context.fillStyle="rgb(95,182,209)"; context.fill(); //上面綠色的三角形 context.beginPath(); context.lineTo(700,0); context.lineTo(350,350); context.lineTo(0,0); context.closePath(); context.fillStyle="rgb(204,241,99)"; context.fill();查看全部
-
计算格子位置查看全部
-
点阵数字每个圆心的计算方法查看全部
-
填充也会自动闭合查看全部
-
clothPath会使没有闭合的路径闭合查看全部
-
可以记一下怎么通过随机数取随机的正数和负数； Math.pow() Math.ceil()查看全部
举报
0/150
提交
取消