七巧板怎么不给源码呢
来源：2-2 绘制直线、多边形和七巧板
狂奔的蚂蚁
2015-04-11 16:01
七巧板怎么不给源码呢？这个例子非常好啊！
写回答
关注
1回答
-
- xiaoyaing
- 2015-12-21 17:19:06
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>七巧板</title> <style> </style> </head> <body> <canvas id="canvas" style="display:block;border:1px solid #aaa;margin:50px auto;"> 当前浏览器不支持canvas，请更换浏览器后再试！ </canvas> <script type="text/javascript"> var site=[ {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#e67817"}, {p:[{x:0,y:0},{x:400,y:0},{x:200,y:200}],color:"#f09ba0"}, {p:[{x:400,y:0},{x:600,y:200},{x:400,y:400},{x:200,y:200}],color:"#fff500"}, {p:[{x:400,y:0},{x:800,y:0},{x:800,y:400}],color:"#d22d2b"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#76c5f0"}, {p:[{x:600,y:200},{x:800,y:400},{x:800,y:800},{x:600,y:600}],color:"#6600a1"}, {p:[{x:400,y:400},{x:800,y:800},{x:0,y:800}],color:"#00923f"} ]; window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); for(var i=0;i<site.length;i++){ draw(site[i],context); } function draw(sitt,ctx){ ctx.beginPath(); ctx.moveTo(sitt.p[0].x,sitt.p[0].y); for(var i=1;i<sitt.p.length;i++){ ctx.lineTo(sitt.p[i].x,sitt.p[i].y); } ctx.closePath(); ctx.fillStyle=sitt.color; ctx.fill(); //ctx.strokeStyle="black"; //ctx.stroke(); } } </script> </body> </html>
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题