1.canvas绘制七巧板--

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>七巧板</title>

</head>

<body>

<canvas id="c1" style="border: 1px solid gray;"></canvas>

<script type="text/javascript">

    var tangram = [

        {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"yellow"},

        {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"pink"},

        {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"purple"},

        {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"},

        {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"red"},

        {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"green"},

        {p:[{x:400,y:800},{x:800,y:400},{x:800,y:800}],color:"lightblue"}

    ];

    function draw(c,shape)

    {

        c.beginPath();  //开始绘制一个路径

        c.moveTo(shape.p[0].x,shape.p[0].y);//移到要绘制的图形的第一个坐标处

        c.fillStyle = shape.color;

        for (var i = 1; i < shape.p.length; i++) //依次绘制到后续坐标

            c.lineTo(shape.p[i].x,shape.p[i].y);

        c.closePath();  //结束一个路径的绘制

        c.fill();

    }

    window.onload = function(){

        var canvas = document.getElementById("c1");

        var context = canvas.getContext("2d");

        canvas.width =800;

        canvas.height = 800;

        for (var i = 0; i < tangram.length; i++) {

            draw(context,tangram[i]);

        }

    };

</script>

</body>

</html>

七巧板源码

2.canvas绘制七巧板--小猫咪

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>七巧板--小猫</title>

</head>

<body>

<canvas id="mycanvas"></canvas>

<script type="text/javascript">

    (function(id){

        var tangram=[

            {p:[{x:520,y:40},{x:520,y:170},{x:595,y:110}],color:"#FDAD05"},

            {p:[{x:595,y:110},{x:670,y:46},{x:670,y:170}],color:"#FC7861"},

            {p:[{x:670,y:170},{x:595,y:110},{x:520,y:170},{x:595,y:246}],color:"#F2DE0C"},

            {p:[{x:595,y:246},{x:432,y:390},{x:602,y:555}],color:"#CA9964"},

            {p:[{x:595,y:246},{x:712,y:350},{x:600,y:465}],color:"#6CA4A7"},

            {p:[{x:432,y:390},{x:430,y:620},{x:670,y:620}],color:"#F54C42"},

            {p:[{x:175,y:528},{x:341,y:535},{x:430,y:620},{x:250,y:610}],color:"#9ECF00"}

        ]

        var canvas=document.getElementById(id);

        canvas.width=1090;

        canvas.height=880;

        var context=canvas.getContext('2d');

        for(var i=0;i<tangram.length;i++)

        {

            context.beginPath();

            context.moveTo(tangram[i].p[0].x,tangram[i].p[0].y);

            for(var j=1;j<tangram[i].p.length;j++){

                context.lineTo(tangram[i].p[j].x,tangram[i].p[j].y);

            }

            context.closePath();

            context.fillStyle=tangram[i].color;

            context.strokeStyle=tangram[i].color;

            context.fill();

            context.stroke();

        }

    })('mycanvas')

</script>

</body>

</html>

七巧板--小猫咪

HTML5之Canvas绘图(二) ——应用篇之七巧板的更多相关文章

  1. HTML5之Canvas绘图(一) ——基础篇

    HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...

  2. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  3. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

  4. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  5. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

  6. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  7. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. 【转】axios的基本使用

    axios的基本使用 vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的 axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中 ...

  2. 更新yum 源

    CentOS系统自带的更新源的速度实在是慢,为了让CentOS6使用速度更快的YUM更新源,可以选择163(网易)的更新源. 1.下载repo文件 wget http://mirrors.163.co ...

  3. Treblecross（uva 10561）

    题意:一个 1 × n 的棋盘,有 X 和 :,当棋盘上出现三个连续的X 时游戏结束,两人轮流操作,每次能把一个 : 变成 X,问先手必胜方案数以及先手可以放的位置. /* 对于先手,当有一个'X'时 ...

  4. SpringTest(一)

     SpringMvcTest总结: 最近要做单元测试,所以选择的是SpringTest这个测试框架. 1.准备工作.(导入jar包)   因为使用Maven管理jar包,所以在要做单元测试的模块中的p ...

  5. UBUNTU命令行下进程查看-终止

    ps ax   显示当前系统进程的列表 ps aux 显示当前系统进程详细列表以及进程用户 如果输出过长,可能添加管道命令 less  如  ps ax|less 查看具体进程,使用 grep命令如  ...

  6. Action 和 Func 的用法以及区别

    Action 无返回值 Func 有返回值,且最后一个参数为返回值 Action用法 public static void test(string s) { Console.WriteLine(&qu ...

  7. strcpy_s 函数的用法

    strcpy_s和strcpy()函数的功能几乎是一样的. strcpy函数,就象gets函数一样,它没有方法来保证有效的缓冲区尺寸,所以它只能假定缓冲足够大来容纳要拷贝的字符串.在程序运行时,这将导 ...

  8. Cryptography I 学习笔记 --- 信息完整性

    1. ECBC-MAC,需要一对密钥k与k1,然后将明文分组,用cbc模式对明文分块加密,将最后的密文块再用k1进行加密,即可得到结果 2. NMAC,需要一对密钥k与k1,然后将明文分组,用k加密第 ...

  9. Linux系统日常运维-修改IP地址

    分享下高手写的很好的文章 IP地址.子网掩码.网络号.主机号.网络地址.主机地址 step 0: check the iptables.selinux service iptables iptable ...

  10. codevs——2102 石子归并 2（区间DP）

    时间限制: 10 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 在一个园形操场的四周摆放N堆石子,现要将石子有次序地 ...