<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script type="text/javascript">

         window.onload = function () {

             var canvas = document.getElementById("canvas");

             var context = canvas.getContext("2d");

             canvas.width = "";

             canvas.height = "";

             var points = [

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }], color: "red" },

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }], color: "orange" },

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }, { x: , y:  }], color: "yellow" },

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }], color: "green" },

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }, { x: , y:  }], color: "cyan" },

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }], color: "blue" },

                 { p: [{ x: , y:  }, { x: , y:  }, { x: , y:  }], color: "purple" }

             ]

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

                 context.beginPath();

                 //context.moveTo(points[i].p[0].x, points[i].p[0].y);

                 for (var j = ; j < points[i].p.length; j++) {

                     context.lineTo(points[i].p[j].x, points[i].p[j].y);

                     context.fillStyle = points[i].color;

                 }

                 context.closePath();

                 context.lineWidth = "";

                 context.strokeStyle = "black";

                 context.stroke();

                 context.fill();

             }

         }

     </script>

 </head>

 <body>

     <canvas id="canvas" style="border:5px solid red ;margin:50px,auto;"></canvas>

 </body>

 </html>

HTML5七巧板canvas绘图（复习）的更多相关文章

  1. HTML5七巧板canvas绘图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  3. HTML5之Canvas绘图(一) ——基础篇

    HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...

  4. HTML5之Canvas绘图(二) ——应用篇之七巧板

    1.canvas绘制七巧板-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  5. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

  6. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  7. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

  8. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 读取bq26500电池电量 Driver

    bq26500是用于锂离子电池.锂聚合物电池充电.放电控制和监控的集成电路芯片.利用它能够准确提供电池充电.放电.电池温度.充放电电压.电池电量等相关数据.不须要外接微处理器參与电池充电.放电等相关数 ...

  2. 吐血整理 Delphi系列书籍 118本（全）

    Delphi 教程 系列书籍 网友(老帅)整理 001_<Delhpi6数据库设计思想与实践> 002_<Delphi6应用开发指南> 003_<Delphi6开发人员指 ...

  3. 如何在 Ubuntu 上搭建网桥

    导读作为一个 Ubuntu 16.04 LTS 的初学者.如何在 Ubuntu 14.04 和 16.04 的主机上搭建网桥呢?顾名思义,网桥的作用是通过物理接口连接内部和外部网络.对于虚拟端口或者 ...

  4. 【转】dependency injection 的例子

    Dependency Injection in PHP. Create your own DI container. / blog / PHP By my opinion one of the big ...

  5. （转） java中try/catch性能和原理

    stackoverflow上有一个讨论,参与的人还挺多: https://stackoverflow.com/questions/141560/should-try-catch-Go-inside-o ...

  6. ckeditor 前段js配置toolbar以及取值(实用)

    <%@ page contentType="text/html;charset=UTF-8"%><%@ include file="/WEB-INF/v ...

  7. Mapper not initialized. Call Initialize with appropriate configuration.

    System.InvalidOperationException:“Mapper not initialized. Call Initialize with appropriate configura ...

  8. 做一个创建cocos2d-x新项目的shell脚本

    1. 进入console目录 cd /Users/apple/Documents/MyArchitecture/Cocos2d-x/Framework/cocos2d-x-3.4/tools/coco ...

  9. 从零開始开发Android版2048 （三）逻辑推断

    近期工作比較忙,所以更新的慢了一点,今天的主要内容是关于Android版2048的逻辑推断,经过本篇的解说,基本上完毕了这个游戏的主体部分. 首先还是看一下,我在实现2048时用到的一些存储的数据结构 ...

  10. 强大的vim配置文件，让编程更随意（转）

    欢迎来到小码哥的博客 博客搬家啦 blog.ma6174.com 强大的vim配置文件,让编程更随意 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点: 1.按F5可以直 ...