canvas练习 - 七巧板绘制

用到的方法：

注意点：

  • stokeStyle等样式要在stroke前边
  • 如果最后只有一个stroke或者fill，那么只填充最后一次路径的，之前的也会画出来但是没有填充看不到。所以每次begin+close Path后要fill或者stroke
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="author" content="xing.org1^">
  7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9   <title>canvas画七巧板</title>
 10   <style>
 11     /*
 12     * @Author: guojufeng@ 
 13     * @Date: 2018-09-18 12:23:44
 14     */
 15     body{
 16       background: #fff;
 17     }
 18     canvas {
 19       margin: 0 auto;
 20       cursor: pointer;
 21       border: 1px solid #eee;
 22     }
 23   </style>
 24 </head>
 25 
 26 <body>
 27   <canvas id="canvas" width="500" height="500">
 28     您的浏览器不支持canvas，请更换
 29   </canvas>
 30   <script>
 31     // function DrawLine(arr) {
 32     //   /* 之前这种写法，以为要一个moveTo一个lineTo的，后来发现moveTo一个开头就行了，剩下的就是lineTo一直走，且最后一个可以不闭合，就是最后一个lineTo可以不回到点上，这样的形状不闭合 */
 33     //   for (var i = 0; i < arr.length; i++) {
 34     //     context.moveTo(arr[i][0], arr[i][1]);
 35     //     if (i == arr.length - 1) { //最后一个点
 36     //       context.lineTo(arr[0][0], arr[0][1]);
 37     //     } else {
 38     //       context.lineTo(arr[i + 1][0], arr[i + 1][1]);
 39     //     }
 40     //   }
 41     // }
 42     function DrawLine(arr,context) {
 43       for(var d = 0; d < arr.length; d++){
 44         var inArr = arr[d]['num'];
 45         context.beginPath();
 46         context.moveTo(inArr[0][0], inArr[0][1]);
 47         /* 如果只是填充颜色，可以不管最后一个lineTo的点要回到圆点的事情。
 48           context.moveTo(inArr[0][0], inArr[0][1]);
 49           for (var i = 0; i < inArr.length; i++) {
 50             context.lineTo(inArr[i][0], inArr[i][1]);
 51           }
 52         context.strokeStyle = arr[d]['color']; //填充颜色
 53         context.stroke();
 54         */
 55         /* 为了闭合图形（画线情况），你也可以判断最后一个点时，让他回到初始值。如下： */
 56         for (var i = 0; i < inArr.length; i++) {
 57           if (i == inArr.length-1) { //最后一个点
 58             context.lineTo(inArr[0][0], inArr[0][1]);
 59           } else {
 60             context.lineTo(inArr[i+1][0], inArr[i+1][1]);
 61           }
 62         }
 63         context.fillStyle = arr[d]['color'];
 64         context.fill();//每次循环也要重新画一遍
 65         context.lineWidth = 3;
 66         context.strokeStyle = '#333';
 67         context.stroke();//每次循环也要重新画一遍
 68       }
 69     }
 70     
 71     window.onload = function(){
 72       var myCanvas = document.getElementById('canvas');
 73       var context = myCanvas.getContext('2d');
 74       var tangram = [{
 75         name: '等腰三角形蓝',
 76         num: [
 77           [0, 0],
 78           [250, 250],
 79           [0, 500]
 80         ],
 81         color: '#62d2ff'
 82       },{
 83         name: '等腰三角形绿',
 84         num: [
 85           [0, 0],
 86           [500, 0],
 87           [250, 250],
 88         ],
 89         color: '#83ff93'
 90       },{
 91         name: '平行四边形',
 92         num: [
 93           [500, 0],
 94           [500, 250],
 95           [375, 375],
 96           [375, 125]
 97         ],
 98         color: '#ff8383'
 99       },{
100         name: '黄三角',
101         num: [
102           [375, 125],
103           [375, 375],
104           [250,250]
105         ],
106         color: '#fff56c'
107       },{
108         name: '橙黄三角',
109         num: [
110           [500, 250],
111           [500, 500],
112           [250, 500]
113         ],
114         color: '#ffb542'
115       },{
116         name: '正方形',
117         num: [
118           [250, 250],
119           [375, 375],
120           [250, 500],
121           [125, 375]
122         ],
123         color: '#f598e0'
124       },{
125         name: '紫色正方形',
126         num: [
127           [250, 500],
128           [125, 375],
129           [0, 500],
130         ],
131         color: '#c673e6'
132       }];
133       DrawLine(tangram,context);
134     }
135   </script>
136 </body>
137 
138 </html>
canvas绘制七巧板源码

 

2018-09-21  15:54:56

posted @ 2018-09-21 16:04  xing.org1^  阅读(461)  评论(0)  编辑  收藏  举报