<!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. day27<反射&JDK5新特性>

    反射(类的加载概述和加载时机) 反射(类加载器的概述和分类) 反射(反射概述) 反射(Class.forName()读取配置文件举例) 反射(通过反射获取带参构造方法并使用) 反射(通过反射获取成员变 ...

  2. 在map中一个key中存多个值

    一说到map都想到key-value键值队存在.key可以为最多一个null的key. 今天开发中一个业务需求,在map中一个key中存多个对象. 我首先想到Map<String,List> ...

  3. Redis（四）-- 集群

    一.Redis适合做企业级分布式缓存集群的条件 1.Redis内置哈希槽,有16384个哈希槽(0~16383),根据CRC16算法来确定这个集群中属于哪一个服务器来处理这个请求. 2.Redis提供 ...

  4. Unity和虚幻的比较

    很多人从Unity开始转向虚幻4了,我目前则相反,从研究使用虚幻4,回到了Unity 5上. 前端总结的Unity和Unreal 4的一些优缺点,自己做的对比图.就先放这里了. 其实,作为引擎,各有优 ...

  5. with revoked permission android.permission.CAMERA

    1,刚出现这样的问题我是直接把 CAMERA 移除掉 2.第一步判断时候授权. if (Build.VERSION.SDK_INT >= 23) { int checkCallPhonePerm ...

  6. ARM、MCU、DSP、FPGA、SOC各是什么？区别是什么？(转)

    ARM ARM处理器是Acorn计算机有限公司面向低预算市场设计的第一款RISC微处理器.更早称作Acorn RISC Machine.ARM处理器本身是32位设计,但也配备16位指令集,一般来讲比等 ...

  7. lua垃圾回收机制

    一.检测lua内存泄漏: 注:使用“collectgarbage("collect")”,局部变量v被回收,my_list没有被回收. 注:局部变量v占用的内存被回收. 注:将my ...

  8. uiimageview 异步加载图片

    dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){ NSURL *url = ...

  9. poj_2396 有上下界的网络流

    题目大意 一个mxn的矩阵,给出矩阵中每一行的和sh[1,2...m]以及每一列的数字的和目sv[1,2...n],以及矩阵中的一些元素的范围限制,比如a[1][2] > 1, a[2][3] ...

  10. python 进行抓包嗅探

    一.绪论 最近一直想弄一个代理,并且对数据包进行解读,从而完成来往流量的嗅探.于是今天学习了一下如何使用Python抓包并进行解包. 首先要用到两个模块 dpkt(我这边ubuntu16.04 LTS ...