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"> & ...
随机推荐
- 搜索8--noi1817:城堡问题
搜索8--noi1817:城堡问题 一.心得 1.这题只是在普通的迷宫的基础上面加上了墙的概念,所以基本的思路和代码就和普通的迷宫是一样的,只不过需要多加上一层墙的判断 2.这里墙的判断是用的二进制加 ...
- 测试通过！为何线上还有很多BUG？
质量控制 大多数测试人员认为测试工作是发现bug,虽然这是测试的主要任务,但其实测试最重要的任务是质量控制,而发现bug和验证bug只是质量控制的一个重要环节而已. 我想很多测试人员都经历过这样的场景 ...
- Codeforces Round #435 (Div. 2) c+d
C:给n和k要求,找出n个不同的数,使得亦或起来等于k 可以先预处理从1到1e5,找亦或起来等于(11111111111111111)(二进制)的所有对数,然后四个一起亦或就是0了,再和k亦或 可以看 ...
- 安装requests 库
这是我见过最恶心的安装了,嘛的,以为公司网络限制.我无法上网 使用 PIP INSTALL REQUESTS .本来就一句话的时 我一直安装不成功.https://www.lfd.uci.edu/~g ...
- SpringBoot WebSocket实现
1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- Java_脚本引擎_02_在Idea中进行Nashorn的Debug
一.前言 本文承接上一节:Java_脚本引擎_01_用法入门 这一节我们来看下怎么在idea中进行Nashorn的Debug ,又或者说怎么在Idea中进行js的Debug 注:idea本身就支持js ...
- nyoj-155-求高精度幂(java大数)
题目链接 import java.util.*; import java.math.*; public class Main{ public static void main(String[] arg ...
- 机器学习：YOLO for Object Detection (二)
之前介绍了 YOLO-v1 单纯的利用一个卷积网络完成了目标检测,不过 YOLO-v1 虽然速度很快,但是比起其他的网络比如 Fast R-CNN 检测的准确率还是差不少,所以作者又提出了改良版的 Y ...
- ES6-浏览器运行环境配置方法
现在ES6用的越来越多,想要学习使用ES6,只需简单搭建引入几个js即可运行ES6代码 但是需要基本的服务器环境下运行(如http://10.12.8.161:8047/js-test/export/ ...
- 安装Windows系统指南
安装系统指南 WIN10PE内核与WIN8PE内核区别: Win10PE内核支持NVME(M.2)新硬盘,WIN8PE不支持NVME. 但是WIN8PE对老机器的适配更好一些,其他功能均一致. 多一个 ...