<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
<script>
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67beef"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51n"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6cn29"}
]

window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
for(var i=0;i<tangram.length;i++)
draw(tangram[i],context);
}

function draw(piece,context){
context.beginPath();
context.moveTo(piece.p[0].x,piece.p[0].y);
for(var i=1;i<piece.p.length;i++)
context.lineTo(piece.p[i].x,piece.p[i].y);
context.closePath();

context.fillStyle=piece.color;
context.fill();

context.strokeStyle="black";
context.lineWidth=3;
context.stroke();

}
</script>
</html>

canvas-画七巧板的更多相关文章

  1. canvas练习 - 七巧板绘制

    用到的方法: 注意点: stokeStyle等样式要在stroke前边 如果最后只有一个stroke或者fill,那么只填充最后一次路径的,之前的也会画出来但是没有填充看不到.所以每次begin+cl ...

  2. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  3. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  4. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  5. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  6. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  8. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  9. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  10. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

随机推荐

  1. Swift和OC混编时, 关于@objc的作用

    Objective-C 和 Swift 在底层使用的是两套完全不同的机制,Cocoa 中的 Objective-C 对象是基于运行时的,它从骨子里遵循了 KVC (Key-Value Coding,通 ...

  2. 高放的c++学习笔记之类

    类的基本思想是数据抽象和封装1.this 成员函数通过一个名为this的额外隐式参数来访问调用它的对象,当我们调用一个函数的时候,用请求该函数的对象的初始化this. 如果某个类的名字为sale,某个 ...

  3. phpcms V9 修改生成静态文件路径/html

    在论坛看到部分用户反馈这个问题,要修改的其实是html_root的值,默认是"/html"如果要生成在网站根目录的话,这个值则要为空.论坛上现在看到的办法是打开caches\con ...

  4. centos 6.5网卡dhcp不能获得网关

    环境:vmware +centos6.5 添加两个虚拟网卡.一个自动获取ip(用于上网-桥接) 一个手动(与主机通信用于ssh-NAT).  因为自已手动改了一下ifcfg-eth0里面的HWADDR ...

  5. DEDE提高生成HTmL的速度

    1.找到include/inc/inc_fun_SpGetArcList.php打开之.   2.查找以下代码:   for($i=0;$i<$ridnum;$i++){     if($tps ...

  6. js解决网页无法复制文字的问题

    碰到有些网站,站长禁止了右键,或者用其它方法不让复制网页的文字,弄的好烦人啊,虽然这是小把戏,但多多少少造成了一些不方便,前几天发现这个解决不能复制问题的小方法,一行代码即搞定,就是下面这行: jav ...

  7. android adb 常用指令

    转自:http://www.cnblogs.com/playing/archive/2010/09/19/1830799.html Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你 ...

  8. C++代码覆盖率工具Coverage Validator

    市面上的C++代码覆盖率工具大都收费,Coverage Validator也不例外.Coverage Validator应该少有人听过,我也是在stackoverflow里听别人介绍的.所以下载了试用 ...

  9. head,tail,cat,more,less

    tail FILE -n 4,查看文件最后4行内容head FILE -n 10,查看文件最前4行内容 使用cat more less都可以查看文本内容,但是它们三者有什么区别呢?more和less的 ...

  10. 如何把SKYPE的发送消息由enter改为ctrl+enter?

    如果您的skype是tom-skype3.8正式版.您可以在skype面板中,选择"工具"-"选项"-"会话"-"会话设置&quo ...