<!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. [转]Loading and Running a Local Package Programmatically

    本文转自:http://msdn.microsoft.com/en-us/library/ms136090.aspx You can run Integration Services packages ...

  2. C++ 初始化列表（转载）

    何谓初始化列表 与其他函数不同,构造函数除了有名字,参数列表和函数体之外,还可以有初始化列表,初始化列表以冒号开头,后跟一系列以逗号分隔的初始化字段.在 C++中,struct和class的唯一区别是 ...

  3. java 利用JAX-RS快速开发RESTful 服务实例

    首先看web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns=" ...

  4. spinner自定义，效果如腾讯QQ账号选择时候的下拉列表

         下拉列表在android中自带spinner的有时候不太适合我们的界面,我们希望有自己的一种显示方法,那怎么办?自定义Spinner.效果如QQ账号选择一样.如图所以. 这种效果,如果你喜欢 ...

  5. 文本域光标操作（选、添、删、取）的jQuery扩展

    ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-exte ...

  6. Android动画之旅-Android动画基本介绍

    在上一篇博客中.我们简单了解了在Android中的动画特效.小伙伴们是不是意犹未尽呀. 还没有看的猛戳这里:Android动画之旅一开篇动画简单介绍 本篇博客.将和大家一起来分析Android中的四大 ...

  7. php求斐波那契数列

    <?php function feibonaqi(){ //参数$num表示为第$num个数之前的所有斐波那契数列 $arr = array(); //定义一个空变量用来存放斐波那契数列的数组 ...

  8. 04-hibernate注解-一对一双向外键关联

    一对一双向外键 1,主控方的配置同一对一单向外键关联. 2,@OneToOne(mappedBy="card") //被控方 @OneToOne(mappedBy="ca ...

  9. 基于redis的简易分布式爬虫框架

    代码地址如下:http://www.demodashi.com/demo/13338.html 开发环境 Python 3.6 Requests Redis 3.2.100 Pycharm(非必需,但 ...

  10. 检查linux网络的状况

    http://hi.baidu.com/dr_wang/blog/item/2952f7458659c306cefca3cc.html