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>

2018-09-21  15:54:56

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

canvas - drawImage()方法绘制图片不显示的问题

事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~

55020
来自专栏Python、Flask、Django

Go 脚本往InfluxDB插入数据

30610
来自专栏施炯的IoT开发专栏

创建分辨率自适应的Windows Phone 8应用程序

1. 引言     Windows Phone 7平台只支持WVGA分辨率(480*800)的设备,这对于应用程序的UI设计来说是有利的,因为设计人员不用考虑多...

22070
来自专栏一“技”之长

iOS中UITableViewController自带的刷新控件

        在iOS开发中,使用tableView的界面,大多会用到一个下拉刷新的的控件,第三方库中,我们一般会选择比较好用的MJRefresh,其实,在i...

11130
来自专栏陈仁松博客

UWP基础教程 - AuotmationProperties.Name

作为Windows10 UWP开发,大家应该会在很多示例DEMO里面看到AuotmationProperties.Name这个属性吧 <Button Autom...

36350
来自专栏LIN_ZONE

js 图片与base64互相转换

参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html

18330
来自专栏林德熙的博客

wpf 如何使用 Magick.NET 播放 gif 图片 安装 Magick.NET解析 gif播放 gif

最近在做 gif 播放,发现 gif 播放需要很多内存,于是就使用 Magick.NET 播放,但是这个方式也需要很多的内存。播放一张 uwp 萤火虫 需要 ...

8920
来自专栏WindCoder

Android学习笔记-控件初体验

python为自己自学的,现仍处于初级阶段,这学期开启的是javaEE和Android开发,所以今后可能会同时出现这些方面的总结内容。

9010
来自专栏张善友的专栏

[翻译]开发Silverlight 2.0的自定义控件

原文:Developing a Custom Control for Silverlight 2.0 译者:张善友 Download MediaButto...

22990
来自专栏smy

触屏touchstart 与 click

设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失。 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸...

421130

扫码关注云+社区

领取腾讯云代金券