canvas,绘制七巧板
<!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,绘制七巧板的更多相关文章
- canvas练习 - 七巧板绘制
用到的方法: 注意点: stokeStyle等样式要在stroke前边 如果最后只有一个stroke或者fill,那么只填充最后一次路径的,之前的也会画出来但是没有填充看不到.所以每次begin+cl ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
随机推荐
- 使用 Spring Boot 快速构建 Spring 框架应用
Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...
- Javascript-理解事件总结
事件 [事件流]表述的是从页面接收事件的顺序.1.事件冒泡流:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).所有浏览器都支持.2.事件捕获:与事件冒泡相反,事件捕获的用意在 ...
- python字典方法
本文参考自<python基础教程 (第二版)> 操作 语法 举例 结果 建立字典 dict() 1.以关键字参数建立字典 2.以其他映射作为参数建立字典 1.d = dict(name=' ...
- JAVA实现多线程的四种方式
JAVA多线程实现方式: 1.继承Thread类(无返回值) 2.实现Runnable接口(无返回值) 3.实现Callable接口,通过FutureTask包装器来创建Threak线程(有返回值) ...
- RK30SDK开发板驱动分析（二）：DDR频率配置
在内核配置界界面,我们可以很容易的配置DDR的频率,300M OR 600M, so easy! 那么它是如何起作用的呢? 回想 RK30SDK开发板驱动分析(一) 末尾提到MACHINE_START ...
- 用node.js可以开启静态服务 不需要借助apache 或者xampl
安装好了Node以及express,然后用express命令生成express架构, 目录结构下面有一个public页面, 把你的静态页面放到这个文件夹下, 通过npm start,开启服务就可以在浏 ...
- 剑指offer--6.数值的整数次方
时间限制:1秒 空间限制:32768K 热度指数:362909 题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. class S ...
- ICE 的回调
使用分布式计算中间件ICE到现在已经有一年多了,在这一年里里面对ICE的理解.应用比较熟悉. 使用ICE写分布式软件,确实是很方便:ICE比较稳定.可靠,调用返回速度低延迟,使用简单,学习曲线不是很陡 ...
- UVA 10417 Gift Exchanging
#include <iostream> #include <cstring> #include <stdio.h> #include <math.h> ...
- Codeforces 802 ABC. Heidi and Library
题目大意 你需要保证第\(i\)天时有第\(a_i\)种书.你可以在任何一天买书,买第\(i\)种书的代价为\(c_i\). 你最多同时拥有\(k\)本书,如果此时再买书,则必须先扔掉已拥有的一本书. ...