<!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. JAVA实现随机无重复数字功能

    本文给大家介绍如何在JAVA中实现随机无重复数字的功能.如果您是初学者的话,有必要看一看这篇文章,因为这个功能一般会在面试中遇到.包括我本人在招聘人员的时候也喜欢拿这个问题去问别人,主要看一看考虑问题 ...

  2. Effective C++ Item 34 Differentiate between inheritance of interface and inheritance of implementation

    1. 成员函数的接口总是被继承. 如 Item32 所说, public 意味着 is-a, 所以对 base class 为真的任何事情对 derived class 也为真 2. 声明一个 pur ...

  3. 棒谷科技java岗笔试题与初试题

    选择题 1.银行家算法的作用 2.docker镜像结构 3.docker的默认网络模式 4.spring的动态代理效率比较 5.springboot默认的json 6.springboot多profi ...

  4. CMake添加debug版本后缀

  5. Triton调试记录

    先编译Release版本 先从下拉列表选择Release-MT-DLL,然后选中Triton-vc14工程, 修改项目属性配置为Release-MT-DLL-NODX,NODX的意思是不使用Direc ...

  6. Window PHP 使用命令行模式

    电脑系统: win7 php环境: phpstudy 1 把php目录放到环境变量path下面: 我的电脑->属性->高级->环境变量->系统变量->Path->编 ...

  7. 从TCP三次握手说起–浅析TCP协议中的疑难杂症(2)

    版权声明:本文由黄日成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108 来源:腾云阁 https://www.qclo ...

  8. 【BZOJ2314】士兵的放置 树形DP

    [BZOJ2314]士兵的放置 Description 八中有N个房间和N-1双向通道,任意两个房间均可到达.现在出了一件极BT的事,就是八中开始闹鬼了.老大决定加强安保,现在如果在某个房间中放一个士 ...

  9. 【BZOJ1717】[Usaco2006 Dec]Milk Patterns 产奶的模式 后缀数组

    [BZOJ1717][Usaco2006 Dec]Milk Patterns Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他不能预见明天产奶的质量 ...

  10. Python - 3.6 学习第一天

    开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute value of a integer a = 100 if a >= 0: ...