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"> & ...
随机推荐
- 0.00-050613_Makefile
# Makefile for the simple example kernel. AS86 =as86 -0 -a LD86 =ld86 -0 AS =gas LD =gld LDFLAGS =-s ...
- Thinkpad个性化设置：F1~F12恢复正常按键，Fn与Ctrl按键互换
一.F1~F12恢复正常按键 联想Thinkpad的F1~F12键功能与其他笔记本是相反的! 也就是说,如果不按着Fn,按那几个功能键,实现的是属性设置的功能,比如直接按下F1键是静音,F2键是音量降 ...
- hadoop环境搭建（linux单机版）
一.在Ubuntu下创建hadoop用户组合hadoop用户 1.创建hadoop用户组 addgroup hadoop 2.创建hadoop用户 adduser -ingroup ...
- Tomcat 多端口访问多应用设置
目的 配置Tomcat,使用多端口访问不同应用 步骤 测试Tomcat版本为apache-tomcat-8.0.5,理论上支持7.0之上的版本 找到tomcat的主目录,打开conf文件夹,找到并打开 ...
- 搞定thrift双向消息
thrift作为脱胎于facebook的rpc框架,各方面都非常优秀.清晰的分层设计,多语言的支持,以及不输protocolbuffer的效率(compact下优于protocolbuffer),都让 ...
- DNS分别在什么情况下使用UDP和TCP？
看到一个题目问的是:DNS分别在什么情况下使用UDP和TCP? 仔细查了一下发现可查询的资料很少,大部分都把DNS所用协议归为UDP了其实不然,DNS同时占用UDP和TCP端口53,这种单个应用协议同 ...
- CH5702 Count The Repetitions[倍增dp]
http://contest-hunter.org:83/contest/0x50%E3%80%8C%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E3%80%8D%E4%B ...
- OSError: [Errno 22] Invalid argument: 'D:\x07ckup\test.txt'
使用with open("D:\backup\test.txt","rt") as f:报上面的错误,将上面的语句改成 with open(r"D:\ ...
- bzoj 3992 [SDOI2015]序列统计——NTT（循环卷积&&快速幂）
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3992 有转移次数.模M余数.方案数三个值,一看就是系数的地方放一个值.指数的地方放一个值.做 ...
- Python 算法之冒泡排序
冒泡排序 冒泡排序算法的原理如下:(从后往前) 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是 ...