<!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. 使用WebFrom来模拟一些MVC的MODEL与View的数据交互功能

    MVC中有一点非常闪瞎人眼的功能就是,可以根据Model与View视图来直接将页面也数据模型进行绑定,那么我们在想客户端发送页面时不需要进行各种控件赋值,不需要操心怎么渲染,当客户提交表单给服务器时也 ...

  2. java数据库连接类，已经把数据库操作的方法都封装好了

    在这里分享一个已经封装好了的java数据库连接类,只要创建对象就可以实现数据库的增删改查操作,用过都说好.其实这个不是我自己写的,是一个理解和学习能力超高的朋友写的,他也很乐于分享交流,本人也深受他的 ...

  3. Date与Calendar

    Date date=new Date();//现在时间 Date date1=new Date(1000);//格林威治时间1997/01/01开始算,后面的是毫秒 Calendar calendar ...

  4. Android常用URI以及URI简介

    Android常用URI android管理联系人的URI: ContactsContract.Contacts.CONTENT_URI 管理联系人的Uri ContactsContract.Comm ...

  5. jQuery的map()与jQuery.map()总结

    请注意他们不是同一个函数.前者是jQuery对象的实例方法(即$.fn.map),后者是一个仅仅挂在jQuery对象下的静态方法(即$.map). 他们用法的异同:map()的返回值是包裹了一个Arr ...

  6. install pip3 for python 3.x

    前言: 我目前使用的服务器为centos6.x 系统自带的python的版本为2.6.x,但是目前无论是学习还是使用python,python3都是首选,那么问题来了.---如何安装python3环境 ...

  7. SQLServer 2008 删除、压缩日志

    SQL Server 2008删除或压缩数据库日志的方法 由于数据库日志增长被设置为“无限制”,所以时间一长日志文件必然会很大,一个400G的数据库居然有600G的LOG文件,严重占用了磁盘空间.由于 ...

  8. laravel和dingoapi的结合使用

    dingoapi是一个laravel的开源插件,可以在github上搜索到,现在在做一个项目,项目中总是会有后端跟前端的json数据交互,而这个dingoapi为json交互提供了很大的便利. 先安装 ...

  9. Laravel 依赖注入原理

    众所周知 Laravel 的文档对于依赖注入只写了如何使用,相信大多数人对于他的实现原理并不太清楚.虽然使用过程中并不需要关心她的原理,但是了解原理让你使用起来更自信.这个帖子就通过一个小 demo ...

  10. [转]10款 Web 开发常备工具

    文章地址:https://my.oschina.net/u/2903254/blog/798135 工欲善其事,必先利其器.如今 Web 开发标准越来越高,Web 开发者也在不断寻找途径提升自己的技能 ...