<!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. logback中打印sql语句

    To log SQL statements for particular mybatis mapper set DEBUG (TRACE to see query parameters and res ...

  2. nmap原理及使用方法

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工具包. 1简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推断 ...

  3. go语言基础之iota枚举

    1.iota (在常量的时候,当成枚举使用) 示例1 package main import "fmt" func main() { //1.iota常量自动生成器,每个一行,自动 ...

  4. web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  5. 高性能WEB开发：Javascript自身执行效率

    Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变 ...

  6. cglib Demo

    转载自:http://huihai.iteye.com/blog/858524 http://www.cnblogs.com/shijiaqi1066/p/3429691.html

  7. 工程web-inf 下文件,路径访问

    直接用相对路径../即可 效果:

  8. .NET dnSpy 程序集编辑器，反编译器和调试器

    https://github.com/0xd4d/dnSpy https://github.com/0xd4d/dnSpy/releases/ dnSpy是反向工程.NET程序集的工具.它包括一个反编 ...

  9. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-为什么无法打开官方范例的项目，打开tszip文件时提示尝试越过结尾怎么办

    打开新的解决方案,找到tszip文件   提示错误Advanced Setting时越过结尾   到这里一般VS会卡死   但是我们已经可以得到解压出来的文件夹,其中包含PLC的完整项目文件夹,可以新 ...

  10. HTTP常用端口号与对应的服务说明

    常用端口号与对应的服务以及端口关闭 端口简介:本文介绍端口的概念,分类,以及如何关闭/开启一个端口 21端口:21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务. ...