<!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. ylbtech-LanguageSamples-Porperties(属性)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Porperties(属性) 1.A,示例(Sample) 返回顶部 “属性”示例 本示 ...

  2. 通过HTTP发包工具了解HTTP协议

    一.HTTP.pl功能简介 HTTP.pl perl编写的发包工具,简化版本curl,像curl致敬(唉,“致敬”都被于妈玩坏了).   该发包工具支持HEAD,GET,METHOD三种基本请求方法, ...

  3. window进入本地组策略编辑器和计算机管理界面

    win+R 进入运行窗口 输入gpedit.msc 进入本地组策略编辑器, 右键我的电脑,点击管理 进入计算机管理界面

  4. 实现自动文本摘要（python，java）

    参考资料:http://www.ruanyifeng.com/blog/2013/03/automatic_summarization.html http://joshbohde.com/blog/d ...

  5. scrapy 抓取数据被禁止的解决方法

    在用抓取头条新闻的数据时出现以下问题:禁止抓取,结果数据没有出来 后来经过查询得知需要把settings.py里面 修改为ROBOTSTXT_OBEY = False就可以了, 默认True

  6. 【转】编译安装PHP并配置PHP-FPM

    1.前言上一篇讲述了如何编译安装MySQL,虽然可以通过yum install 或者rpm来安装,但是yum install和rpm安装有一个特点,就是有些参数是别人根据大众需求定制的,如果需要进行自 ...

  7. 主动通知Android系统图库进行更新

    项目中遇到调用图库进行图片的选择,因为不能主动及时更新,遂实现代码调用实现主动及时更新. 废话不多刷,看代码. 方式一,发送一个广播, sendBroadcast(new Intent(Intent. ...

  8. 关于Object.defineProperty的get和set

    面试经常提问vue双向数据绑定的原理,其主要是依赖于Object.definePropety(); Object.definePropety下面有get和set方法. get指读取属性时调用的放法,s ...

  9. AngularJS模块具体解释

    模块是提供一些特殊服务的功能块.比方本地化模块负责文字本地化,验证模块负责数据验证.一般来说,服务在模块内部,当我们须要某个服务的时候,是先把模块实例化.然后再调用模块的方法. 但Angular模块和 ...

  10. Hadoop-2.4.1学习之怎样确定Mapper数量

    MapReduce框架的优势是能够在集群中并行运行mapper和reducer任务,那怎样确定mapper和reducer的数量呢,或者说怎样以编程的方式控制作业启动的mapper和reducer数量 ...