canvas 学习记录之 七巧板 


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>canvas</title>
 8 </head>
 9 <body>
10 <canvas id="canvas"></canvas>
11 </body>
12 <script>
13 let canvas = document.getElementById("canvas");
14 let ctx;
15 if (!canvas) {
16 alert("not support canvas");
17 } else {
18 canvas.width = 800;
19 canvas.height = 800;
20 ctx = canvas.getContext("2d");
21 }
22 
23 const tangram = [
24 {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
25 {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
26 {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
27 {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
28 {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
29 {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
30 {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
31 ];
32 
33 tangram.forEach(piece => drawPiece(piece));
34 
35 function drawPiece(p)
36 {
37 if(!p)
38 {
39 return;
40 }
41 ctx.beginPath();
42 ctx.moveTo(p.p[0].x,p.p[0].y);
43 for(let i=1;i<p.p.length;i++)
44 {
45 ctx.lineTo(p.p[i].x,p.p[i].y);
46 }
47 ctx.closePath();
48 ctx.fillStyle=p.color;
49 ctx.fill();
50 
51 ctx.lineWidth = 3;
52 ctx.strokeStyle=3;
53 ctx.stroke();
54 }
55 </script>
56 </html>

 

posted @ 2019-01-01 10:00  冷风吹雨  阅读(130)  评论(0)    收藏  举报