<!DOCTYPE html>
<html>
    <canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
    <canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
</html>
<script>
position = [
 {p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#cfff67"},
 {p:[{x:0, y:0}, {x:400, y:400}, {x:0, y:800}], color:"#67becf"},
  {p:[{x:800, y:0}, {x:800, y:400}, {x:600, y:600}, {x:600, y:200}], color:"#6fbfcf"},
  {p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#6eefcf"},
  {p:[{x:400, y:400}, {x:600, y:600}, {x:400, y:800}, {x:200, y:600}], color:"#abe"},
  {p:[{x:200, y:600}, {x:400, y:800}, {x:0, y:800}], color:"#eab"},
  {p:[{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#6e9ec9"},

]
var canvas = document.getElementById('diag');     //huo
var context = canvas.getContext('2d');   //获取canvas上下环境
canvas.width = '800';
canvas.height = '800';
for(i=0; i<position.length; i++) {
    draw(position[i], context)
}
function draw(pe, context) {
    context.beginPath();
    context.moveTo(pe.p[0].x, pe.p[0].y);
    console.log(pe.p.length);
    // return;
    for (var i = 1; i < pe.p.length; i++) {
        // console.log(pe.p)
        context.lineTo(pe.p[i].x, pe.p[i].y)
    };
    context.closePath();
    context.fillStyle=pe.color;
    context.fill()
}
</script>

html5 七巧板的更多相关文章

  1. HTML5七巧板canvas绘图（复习）

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

  2. HTML5七巧板canvas绘图

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

  3. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

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

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

  5. 微信html5开发选哪一个

        html5选哪个开发框架       ①. Justep起步 X5框架 : 专门用来开发web App的大型开发工具集,x5 v3.0有765.58M,不选. ②.Jquery Mobile ...

  6. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  7. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  9. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

随机推荐

  1. Linux select 机制深入分析

    Linux select 机制深入分析            作为IO复用的实现方式.select是提高了抽象和batch处理的级别,不是传统方式那样堵塞在真正IO读写的系统调用上.而是堵塞在sele ...

  2. 自定向下分析Binder 之 Binder Model（1）

    Java层的Binder对象模型: IBinder IBinder是Binder通信机制中的核心部分(Base interface for a remotable object, the core p ...

  3. python2.0_day18_django_ORM

    Django_ORMday15\16我们学到的ORM都是最基本的增删改查.下面我们稍作升级,学习下高级点的增删改查.先创建一个新的APP项目 python3. manage.py startapp b ...

  4. 如何才能知道外线是FSK还是DTMF制式？

    在直线上接上来电显示话机,然后用手机或其他电话拨接电话的外线号码. 1.如果是先振铃后来显,就是FSK制式. 2.如果先送来显,再振铃或来显和振铃同时响应,就是DTMF制式 交换机默认配置是FSK制式 ...

  5. /etc/security/limits.conf

    ulimit 命令用来限制系统用户对 shell 资源的访问,但只是临时生效,想要永久生效需要配置 /etc/security/limits.conf 文件,语法及常见配置如下: [root@loca ...

  6. Python MySQLdb 模块

    MySQLdb 是 Python2 连接 MySQL 的一个模块,常见用法如下: [root@localhost ~]$ yum install -y MySQL-python # 安装 MySQLd ...

  7. poj_1190 树状数组

    题目大意 给定一个S*S的矩形,该矩形由S*S个1x1的单元格构成,每个单元格内可以放一个整数,每次有如下可能操作: (1)改变某个单位单元格中的数的大小 (2)查询由若干个连续单元格构成的X*Y的大 ...

  8. java基础---->多线程之interrupt（九）

    这里我们通过实例来学习一下java多线程中关于interrupt方法的一些知识.执者失之.我想当一个诗人的时候,我就失去了诗,我想当一个人的时候,我就失去了我自己.在你什么也不想要的时候,一切如期而来 ...

  9. java基础---->数字签名算法的介绍

    数字签名(又称公钥数字签名)是一种类似写在纸上的普通的物理签名,但是使用了公钥加密领域的技术实现,用于鉴别数字信息的方法.关于数字签名的介绍,可以参见百度百科:http://baike.baidu.c ...

  10. Sass-学习笔记【基础篇】

    最下边附结构图 在线编辑器网址如下:http://sassmeister.com/  注意编写的时候,符号千万别用了中文的:.:.....之类的,会报错,Sass也转换不成css. less和sass ...