<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<canvas id="canvas" style="border: 1px solid black;display: block;margin: 50px auto;">

</canvas>

</body>

<script type="text/javascript">

//定义一个数组变量,分别代表七巧板的七块

//每一部分是一个类的对象,每一部分包含一个p,

//p也是一个数组,分别代表七巧板的每一块的顶点坐标

//color属性代表每一块的颜色

var tangram = [{

p: [{

x: 0,

y: 0

}, {

x: 800,

y: 0

}, {

x: 400,

y: 400

}],

color : "red"

}, {

p: [{

x: 0,

y: 0

}, {

x: 400,

y: 400

}, {

x: 0,

y: 800

}],

color : "blue"

}, {

p: [{

x: 800,

y: 0

}, {

x: 800,

y: 400

}, {

x: 600,

y: 600

}, {

x: 600,

y: 200

}],

color : "yellow"

}, {

p: [{

x: 600,

y: 200

}, {

x: 600,

y: 600

}, {

x: 400,

y: 400

}],

color : "pink"

}, {

p: [{

x: 400,

y: 400

}, {

x: 600,

y: 600

}, {

x: 400,

y: 800

}, {

x: 200,

y: 600

}],

color : "gray"

}, {

p: [{

x: 200,

y: 600

}, {

x: 400,

y: 800

}, {

x: 0,

y: 800

}],

color : "green"

}, {

p: [{

x: 800,

y: 400

}, {

x: 800,

y: 800

}, {

x: 400,

y: 800

}],

color : "orange"

}]

window.onload = function() {

//获取Canvas

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

//定义宽高

canvas.width = 800;

canvas.height = 800;

//获取context

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

//遍历七巧板数组

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

//每次遍历调用函数draw()

draw(tangram[i], context);

//draw()函数传入两个参数,第一个是七巧板中的一块,

//第二个是我们获得的绘图的上下文环境context

}

function draw(piece, cxt) {

cxt.beginPath();

//用moveTo移动到顶点坐标的第一个坐标的位置

cxt.moveTo(piece.p[0].x, piece.p[0].y);

//使用循环顺次绘制路径

for(var i = 1; i < piece.p.length; i++)

cxt.lineTo(piece.p[i].x, piece.p[i].y);

cxt.closePath();

//定义颜色,调用piece.color

cxt.fillStyle = piece.color;

cxt.fill();

//给七巧板的每一块加一个外边框

cxt.strokeStyle="black";

cxt.lineWidth=3;

cxt.stroke();

}

</script>

</html>

canvas,绘制七巧板的更多相关文章

  1. canvas练习 - 七巧板绘制

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

  2. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

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

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

  4. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  8. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. Android Sqlite 批量插入性能优化

    db.beginTransaction(); try { for (...) { db.execSQL("...", new Object[]{}); } db.setTransa ...

  2. 配置JSP模板

  3. SPFA算法O(kE)

    SPFA算法O(kE) Dijkstra和Floyed是不断的试点.Dijkstra试最优点,Floyed试所有点. Bellman-Ford和SPFA是不断的试边.Bellman-Ford是盲目的试 ...

  4. Redis源码研究:哈希表 - 蕫的博客

    [http://dongxicheng.org/nosql/redis-code-hashtable/] 1. Redis中的哈希表 前面提到Redis是个key/value存储系统,学过数据结构的人 ...

  5. sql处理数据库锁的存储过程

    /*--处理死锁 查看当前进程,或死锁进程,并能自动杀掉死进程 因为是针对死的,所以如果有死锁进程,只能查看死锁进程 当然,你可以通过参数控制,不管有没有死锁,都只查看死锁进程 --邹建 2004.4 ...

  6. s3cmd 安装使用指南

    https://wangyan.org/blog/s3cmd-how-to-use.html s3cmd 安装使用指南 s3cmd 是一款 Amazon S3 命令行工具.它不仅能上传.下载.同步,还 ...

  7. datatable绑定comboBox,在下拉菜单中显示对应数据

    实现功能: datatable绑定comboBox,在下拉菜单中显示对应数据 实现方法: .生成datatable,并为combox绑定数据源: comboBox1.DataSource = dt1; ...

  8. python虚拟开发环境搭建(virtualenv和virtualenvwrapper)

    虚拟开发环境的搭建 (0) 搭建虚拟环境的意义 使不同的开发环境独立 环境升级不影响其他开发环境,也不影响全局 防止包管理的混乱 (1) 指定 虚拟环境的创建目录 环境变量设置 创建 WORKON_H ...

  9. SVN管理多个项目版本库 (windows,linux 通用)

    SVN管理多个项目版本库: . 安装SVN服务器软件,路径: C:\Program Files\Subversion . 在D盘创建svn根目录D:\SVN-CM . 在D:\SVN-CM下创建SVN ...

  10. 加密第四节_IPSec基本理论

    加密第四节_IPSec基本理论 本节内容 IPSec简介 IPSec两种工作模式 判断隧道模式和传输模式 IPSec两种模型 IPSec两个数据库 IPSec基本理论 IPSec简介 提供了网络层的安 ...