HTML5 canvas写的七巧板

最新推荐文章于 2021-07-27 11:51:54 发布

小猫爱吃糖

最新推荐文章于 2021-07-27 11:51:54 发布

阅读量497

点赞数 1

文章标签： html5 canvas

本文链接：https://blog.csdn.net/wch_zcz/article/details/39941681

版权

最近一直在做手机端的项目，经常会应用到canvas画图，例如刮刮奖、大转盘神马的，感觉真的好神奇！但是一直没有静下心来研究过，最近终于克服了自己懒惰的毛病，慢慢学习，希望自己有一天能自己写出来超级炫的效果。

给大家奉献七巧板的源码，粘贴复制就好哦！

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>七巧板</title>
</head>
<body>
<canvas id="canvas"style="display: block; border:1px solid red;">您的浏览器不支持canvas</canvas>
<script>
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':"#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':"purple"},
{'p':[{'x':400,'y':400},{'x':600,'y':600},{'x':400,'y':800},{'x':200,'y':600}],'color':"orange"},
{'p':[{'x':200,'y':600},{'x':400,'y':800},{'x':0,'y':800}],'color':"#000"},
{'p':[{'x':800,'y':400},{'x':800,'y':800},{'x':400,'y':800}],'color':"red"}
];

window.οnlοad=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.stroke();
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();
};
</script>
</body>
</html>