用到的方法：

注意点：

  • stokeStyle等样式要在stroke前边
  • 如果最后只有一个stroke或者fill，那么只填充最后一次路径的，之前的也会画出来但是没有填充看不到。所以每次begin+close Path后要fill或者stroke
 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="author" content="xing.org1^">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>canvas画七巧板</title>

   <style>

     /*

     * @Author: guojufeng@

     * @Date: 2018-09-18 12:23:44

     */

     body{

       background: #fff;

     }

     canvas {

       margin: 0 auto;

       cursor: pointer;

       border: 1px solid #eee;

     }

   </style>

 </head>

 <body>

   <canvas id="canvas" width="500" height="500">

     您的浏览器不支持canvas，请更换

   </canvas>

   <script>

     // function DrawLine(arr) {

     //   /* 之前这种写法，以为要一个moveTo一个lineTo的，后来发现moveTo一个开头就行了，剩下的就是lineTo一直走，且最后一个可以不闭合，就是最后一个lineTo可以不回到点上，这样的形状不闭合 */

     //   for (var i = 0; i < arr.length; i++) {

     //     context.moveTo(arr[i][0], arr[i][1]);

     //     if (i == arr.length - 1) { //最后一个点

     //       context.lineTo(arr[0][0], arr[0][1]);

     //     } else {

     //       context.lineTo(arr[i + 1][0], arr[i + 1][1]);

     //     }

     //   }

     // }

     function DrawLine(arr,context) {

       for(var d = 0; d < arr.length; d++){

         var inArr = arr[d]['num'];

         context.beginPath();

         context.moveTo(inArr[0][0], inArr[0][1]);

         /* 如果只是填充颜色，可以不管最后一个lineTo的点要回到圆点的事情。

           context.moveTo(inArr[0][0], inArr[0][1]);

           for (var i = 0; i < inArr.length; i++) {

             context.lineTo(inArr[i][0], inArr[i][1]);

           }

         context.strokeStyle = arr[d]['color']; //填充颜色

         context.stroke();

         */

         /* 为了闭合图形（画线情况），你也可以判断最后一个点时，让他回到初始值。如下： */

         for (var i = 0; i < inArr.length; i++) {

           if (i == inArr.length-1) { //最后一个点

             context.lineTo(inArr[0][0], inArr[0][1]);

           } else {

             context.lineTo(inArr[i+1][0], inArr[i+1][1]);

           }

         }

         context.fillStyle = arr[d]['color'];

         context.fill();//每次循环也要重新画一遍

         context.lineWidth = 3;

         context.strokeStyle = '#333';

         context.stroke();//每次循环也要重新画一遍

       }

     }

     window.onload = function(){

       var myCanvas = document.getElementById('canvas');

       var context = myCanvas.getContext('2d');

       var tangram = [{

         name: '等腰三角形蓝',

         num: [

           [0, 0],

           [250, 250],

           [0, 500]

         ],

         color: '#62d2ff'

       },{

         name: '等腰三角形绿',

         num: [

           [0, 0],

           [500, 0],

           [250, 250],

         ],

         color: '#83ff93'

       },{

         name: '平行四边形',

         num: [

           [500, 0],

           [500, 250],

           [375, 375],

           [375, 125]

         ],

         color: '#ff8383'

       },{

         name: '黄三角',

         num: [

           [375, 125],

           [375, 375],

           [250,250]

         ],

         color: '#fff56c'

       },{

         name: '橙黄三角',

         num: [

           [500, 250],

           [500, 500],

           [250, 500]

         ],

         color: '#ffb542'

       },{

         name: '正方形',

         num: [

           [250, 250],

           [375, 375],

           [250, 500],

           [125, 375]

         ],

         color: '#f598e0'

       },{

         name: '紫色正方形',

         num: [

           [250, 500],

           [125, 375],

           [0, 500],

         ],

         color: '#c673e6'

       }];

       DrawLine(tangram,context);

     }

   </script>

 </body>

 </html>

canvas绘制七巧板源码

2018-09-21  15:54:56

canvas练习 - 七巧板绘制的更多相关文章

  1. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  3. canvas实现七巧板图案和粒子时钟

      canvas实现七巧板 <canvas id="canvas" width="800" height="800"></ ...

  4. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  5. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  6. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  7. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  8. Android Canvas使用drawBitmap绘制图片

    1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float top, ...

  9. android中Canvas使用drawBitmap绘制图片

    1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置     drawBitmap(Bitmap bitmap, float left, float ...

随机推荐

  1. ubuntu -- 安装最新版的nodejs

    1.安装最新的nodejs和npm # apt-get update # apt-get install -y python-software-properties software-properti ...

  2. org.in2bits.MyXls.XlsDocument 生成excel文件 ; 如果想读取模板再另外生成的话,试试 NPOI

    优点:不依赖Microsoft组件,在内存中操作excel,读写速度快.   缺点:无法读取模板,只能生成新的excel (我亲自测试是在读取完模板后,不能保存,也不能另存,并且其他人说这个读取还会有 ...

  3. hadoop hdfs 命令

    hdfs命令常用操作: hdfs帮助 -help [cmd] 显示命令的帮助信息 [hadoop@hadoop-01 ~]$ hdfs dfs -help ls 递归显示当前目录下的所有文件: [ha ...

  4. CentOS6.8下安装MySQL5.6

    一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | grep mysql 有的话通过下面的命令来卸载掉 rpm -e mysql //普通删除模式 rpm -e ...

  5. C# WinForm下，隐藏主窗体的方法

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. UGUI 加载图片

    图片是动态加载的,然后转换为sprite赋值到ugui的按钮上 代码如下 using UnityEngine; using System.Collections; using System.IO; u ...

  7. quake3中求1/sqrt(x)的算法源代码

    quake3中求1/sqrt(x)的算法源代码如下(未作任何修改): float Q_rsqrt( float number ) { long i; float x2, y; const float ...

  8. iOS 模拟器的“调试-位置”总是变成无的问题

    选择项目的“Edit Scheme...” 并且选择“Options”选项卡,更改你喜欢的默认地理位置 你也可以编辑一个gpx文件永久保存坐标,或者在线生成(传送门). 转自:iOS Simulato ...

  9. 怎样解决Java Web项目更改项目名后报错

    作为企业级开发最流行的工具,用Myeclipse开发java web程序无疑是最合适的,有时候,我们需要web工程的项目名,单方面的改动工程的项目名是会报错的,那么该如何改web工程项目名呢? 简 单 ...

  10. 【WP8】富文本功能实现

    2014年8月1日更新:修复如果有多个相同链接解析失败的Bug,谢谢 @Walsh 提供的问题 富文本在移动APP上应用的最多的就是表情了,类似微博,QQ,微信都有对提供对表情和链接的支持,富文本一般 ...