七巧板用h5设置

最新推荐文章于 2021-09-22 15:27:32 发布

菜鸟的修炼

最新推荐文章于 2021-09-22 15:27:32 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/life91/article/details/72629916

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>七巧板绘制</title>
</head>
<body>

   <canvas id="canvas" style="border:1px solid black">
   </canvas>
   <script >
       var canvas=document.getElementById('canvas');
       // 设置画布的宽和高
       canvas.width=800;
       canvas.height=800;
       var context=canvas.getContext('2d');
       // 获取环境的上下文，获取对象来绘制图像，2d和3d是固定
       // context.beginPath();//开始新的起点
       // context.moveTo(0,0);//设置起始点位置
       // context.lineTo(400,400);//下一个点的位置
       // context.lineTo(0,800);
       // context.closePath();//将线性封装
       // context.fillStyle="#CCFF80";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // context.beginPath();//开始新的起点
       // context.moveTo(0,0);//设置起始点位置
       // context.lineTo(400,400);//下一个点的位置
       // context.lineTo(800,0);
       // context.closePath();//将线性封装
       // context.fillStyle="#66D4BF";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // context.beginPath();//开始新的起点
       // context.moveTo(400,400);//设置起始点位置
       // context.lineTo(200,600);//下一个点的位置
       // context.lineTo(400,800);
       // context.lineTo(600,600);
       // context.closePath();//将线性封装
       // context.fillStyle="#FF4180";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // context.beginPath();//开始新的起点
       // context.moveTo(200,600);//设置起始点位置
       // context.lineTo(0,800);//下一个点的位置
       // context.lineTo(400,800);
       // context.closePath();//将线性封装
       // context.fillStyle="#66D4BF";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // context.beginPath();//开始新的起点
       // context.moveTo(400,800);//设置起始点位置
       // context.lineTo(800,800);//下一个点的位置
       // context.lineTo(800,400);
       // context.closePath();//将线性封装
       // context.fillStyle="#FFD440";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // context.beginPath();//开始新的起点
       // context.moveTo(600,600);//设置起始点位置
       // context.lineTo(600,200);//下一个点的位置
       // context.lineTo(400,400);
       // context.closePath();//将线性封装
       // context.fillStyle="#FFFF00";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // context.beginPath();//开始新的起点
       // context.moveTo(600,200);//设置起始点位置
       // context.lineTo(800,0);//下一个点的位置
       // context.lineTo(800,400);
       // context.lineTo(600,600);
       // context.closePath();//将线性封装
       // context.fillStyle="#9990BF";
       // context.fill();
       // context.stroke();//绘制线条，在绘制之前，都要设置绘制状态

       // 第二种方法写七巧板
       var s=[
       [{x:0,y:0},{x:800,y:0},{x:400,y:400},{color:"#CCFF80"}],

       [{x:0,y:0},{x:400,y:400},{x:0,y:800},{color:"#66D4BF"}],

       [{x:400,y:400},{x:200,y:600},{x:400,y:800},{x:600,y:600},{color:"#FF4180"}],

       [{x:200,y:600},{x:400,y:800},{x:0,y:800},{color:"#66D4BF"}],

       [{x:800,y:400},{x:800,y:800},{x:400,y:800},{color:"#FFD440"}],

       [{x:800,y:400},{x:800,y:0},{x:600,y:200},{x:600,y:600},{color:"#9990BF"}],

       [{x:400,y:400},{x:600,y:200},{x:600,y:600},{color:"#FFFF00"}]
       ]
       function draw(s){
           for (var i = 0; i < s.length; i++) {
               context.beginPath();
               for (var j = 0; j < s[i].length; j++) {
                   context.lineTo(s[i][j].x,s[i][j].y);
                   context.fillStyle=s[i][j].color;

               }
               context.fill();
               context.stroke();
           }
       }
       draw(s);
   </script>
</body>
</html>

菜鸟的修炼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七巧板用h5设置

七巧板绘制 var canvas=document.getElementById('canvas'); // 设置画布的宽和高 canvas.width=800; canvas.height=800; var context=canvas.getContext(
复制链接

扫一扫