H5-canvas七巧板实例

最新推荐文章于 2022-12-19 16:48:35 发布

y刺猬的拥抱

最新推荐文章于 2022-12-19 16:48:35 发布

阅读量590

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_42336593/article/details/80786363

版权

本文通过JavaScript展示了如何使用HTML5 Canvas元素创建七巧板实例。代码中定义了七巧板的各个形状坐标和颜色，然后遍历绘制每个图形，最后用fillStyle填充颜色并完成绘制。

摘要由CSDN通过智能技术生成

window.onload = function() {
     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:"#f9f51a"},
      {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"},
      {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
      {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
     ];
     var canvas = document.querySelector("canvas"); //获取canvas元素
     var context = canvas.getContext("2d");  //获取绘图上下文环境
     for (var i = 0; i < tangram.length; i++) {
         draw(context, tangram[i]);
     };
     function draw (ctxt,piece) {
         ctxt.beginPath();  //开始路径
         ctxt.m