html5 七巧板

最新推荐文章于 2021-07-14 06:50:19 发布

weixin_30564901

最新推荐文章于 2021-07-14 06:50:19 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/agang-php/p/4822849.html

本文介绍了一个使用HTML5 Canvas元素进行图形绘制的例子。通过定义不同的顶点位置和颜色，实现了多个不同形状的填充图形展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
   <canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
</html>
<script>
position = [
{p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#cfff67"},
{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:"#6fbfcf"},
{p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#6eefcf"},
{p:[{x:400, y:400}, {x:600, y:600}, {x:400, y:800}, {x:200, y:600}], color:"#abe"},
{p:[{x:200, y:600}, {x:400, y:800}, {x:0, y:800}], color:"#eab"},
{p:[{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#6e9ec9"},

]
var canvas = document.getElementById('diag');     //huo
var context = canvas.getContext('2d');   //获取canvas上下环境
canvas.width = '800';
canvas.height = '800';
for(i=0; i<position.length; i++) {
   draw(position[i], context)
}
function draw(pe, context) {
   context.beginPath();
   context.moveTo(pe.p[0].x, pe.p[0].y);
   console.log(pe.p.length);
   // return;
   for (var i = 1; i < pe.p.length; i++) {
       // console.log(pe.p)
       context.lineTo(pe.p[i].x, pe.p[i].y)
   };
   context.closePath();
   context.fillStyle=pe.color;
   context.fill()
}
</script>