<!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. 超全面的JavaWeb笔记day08<Tomcat&Web应用&HTTP协议>

    1.常用软件体系结构 BS:浏览器/服务器 CS:客户端/服务器 WEB资源 动态资源 JSP Servlet 静态资源 html 常用服务器 Tomcat Weblogic Resin JBOSS ...

  2. Java精选笔记_Java入门

    Java概述 什么是Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言 JavaSE标准版 是为开发普通桌面和商务应用程序提供的解决方案 JavaEE企业版 是为开发企业级应用程序提供的解 ...

  3. excel中，一系列单元格中包含某一个字段的单元格数量？

    excel中,一系列单元格中包含某一个字段的单元格数量?这个怎么写公式?如:A列单元格A1-A7的内容分别为 A.AB.BC.AC.CD.AD.EA,怎么数这一列中几个单元格的内容包含A字母? 任意单 ...

  4. HDFS原理解析（总体架构，读写操作流程）

    前言 HDFS 是一个能够面向大规模数据使用的,可进行扩展的文件存储与传递系统.是一种允许文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和 存储空间.让实际上是通过网络来访问文件 ...

  5. Java信号量 Semaphore 介绍

    一.介绍 Semaphore当前在多线程环境下被扩放使用,操作系统的信号量是个很重要的概念,在进程控制方面都有应用.Java 并发库 的Semaphore 可以很轻松完成信号量控制,Semaphore ...

  6. 【LNMP】 fileinfo扩展安装

    1  查看服务器php版本 : php -v 2  进入目录 , 解压相对应的PHP 版本压缩包, cd /lnmp1./srctar zxvf php-7.0.tar.gz 3  输入以下命令 cd ...

  7. activemq 实战三 了解连接器的URI-Understanding connector URIs

    Before discussing the details of connectors and their role in the overall ActiveMQ architecture, it’ ...

  8. XML的一些点

    最近学习Spring会配置许多XML文件,没有系统学习过XML遇到了许多问题,系统的看了一下有些拨云见日的感觉. 推荐学习:http://www.w3school.com.cn/xml/xml_int ...

  9. iOS 单例用法

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模式的要点有三个:一是某个类只能有一个实例: ...

  10. java如何计算两个日期之间相差多少天？

    java如何计算两个日期之间相差多少天? public static void main(String [] args) { Date now = new Date(); Calendar cal = ...