<!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. Jenkins学习之——(4)Email Extension Plugin插件的配置与使用

    1.先安装插件 2.配置 点击高级后 内容配置: 3.项目配置 点击Advanced Settings后 到此所有的配置都设置完成. 附录: 以下内容来自其他网友的博客,内容也没有自己去试,朋友们可以 ...

  2. CentOS 7 之安装Mono&MonoDevelop

    之前在园子里看过一篇文章说的是在CentOS 7上安装MonoDevelop的,一直想照着弄一遍都没有弄,今天深圳外面下暴雨,就在家里弄一下这个吧,以后也试着在Linux上面写写C#玩玩.这一试,还真 ...

  3. phpwind伪静态规则(IIS,Nginx,Apache)的介绍及代码

    phpwind iis下伪静态规则[ISAPI_Rewrite]RewriteRule ^(.*)/(.*)-htm-(.*)-(.*).html$ $1/$2.php?$3=$4RewriteRul ...

  4. Laravel5中集成Jasig cas统一认证系统

    CAS : CAS(Central Authentication Service)是一款不错的针对 Web 应用的单点登录框架,这里介绍下我刚在laravel5上搭建成功的cas.提前准备工作:可运行 ...

  5. delphi2010 开发及调试WebService 实例

    使用delphi已经10多年了,一直搞桌面程序开发,对Webservice一直很陌生,近来因工作需要,学习delphi开发WebService,担心遗忘,作此笔记. 特别感谢 中塑在线技术总监 大犇 ...

  6. iOS 3D Touch功能 3 -备

    新的触摸体验——iOS9的3D Touch 一.引言 二.在模拟器上学习和测试3D Touch 附.SBShortcutMenuSimulator的安装和使用 三.3D Touch的主要应用 四.3D ...

  7. cf C. Maze

    http://codeforces.com/problemset/problem/378/C #include <cstdio> #include <cstring> #inc ...

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

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

  9. 功能：使用QQ号登陆，并加上微信和短信提醒，是否增量备份可选，阿里大鱼短信发送开发与测试，聚合数据（用JSON发短信，比较清楚）

    微博就可以,所以其它软件也可以http://desktop.weibo.com/ http://blog.csdn.net/jueblog/article/details/14497181http:/ ...

  10. android 截取指定位置字符串

    String str = "s\ziyuan"; String newStr = str.subString(str.indexOf("\\"),str.len ...