2016-02-21

使用Canvas绘制七巧板

中午登上慕课网，偶然发现慕课网改版了，这倒是其次，惊奇的是页面居然出现了不显示我的观看记录和观看百分比的BUG！还准备说要给慕课网反馈一下来着，晚上一登，居然修复了，不得不佩服慕课网工程师们惊人的处突能力啊。

回到正题，相信大家都见到过七巧板，本文使用简单的HTML5新特性Canvas的2d图形绘制功能，绘制了一个简单的七巧板。

Canvas是HTML5的新特性，相比于其他的HTML标签来说，Canvas给前端工程师们提供了更多的操作可能性，也为页面的生动化效果做出了不菲的贡献。canvas的3d绘图的出现，加上JS对HTML页面的强大动态渲染能力，加上各大浏览器厂商对于Flash的抛弃，相信日后canvas将在HTML页面展示，HTML游戏，HTML动画上大有可为。

canvas的2d绘图非常简单，整体的操作感觉非常的人性化，主要是要区分，移动到点位（moveTo）和划线到点位（lineTo）的区别，canvas对于页面的色彩和轮廓方面也加入了相应的边框（stroke）和填充（fill）功能，下面让我们一起来看一下七巧板的canvas实现吧。

HTML方面

这块我就写了一个canvas的标签，同时制定它的宽高等属性，有一点要注意，其宽高最好不要使用px作为单位，而是使用默认值作为单位（简单点说就是不要写宽高的单位），否则在后期绘图会出现绘图区的一些问题。

1	<canvas id="canvas" width="800" height="800" style="border: 1px solid #eee">Your broser can't support canvas</canvas>

JS方面

学过canvas的同学肯定知道，2d绘图简直就是小儿科，用来用去也就那么几个API，照本宣科就是了。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var arr = [
	{position: [{x: 0,y: 0},{x: 400,y: 400},{x: 800,y: 0},{x: 0,y: 0}],color: "#caff67"},
	{position: [{x: 0,y: 0},{x: 400,y: 400},{x: 0,y: 800},{x: 0,y: 0}],color: "#67becf"},
	{position: [{x: 0,y: 800},{x: 400,y: 400},{x: 800,y: 800},{x: 0,y: 800}],color: "#ef3d61"},
	{position: [{x: 400,y: 400},{x: 800,y: 400},{x: 600,y: 600},{x: 400,y: 400}],color: "#f9f51a"},
	{position: [{x: 400,y: 400},{x: 800,y: 400},{x: 800,y: 0},{x: 400,y: 400}],color: "#a594c0"},
	{position: [{x: 600,y: 600},{x: 800,y: 600},{x: 800,y: 400},{x: 600,y: 600}],color: "#fa8ecc"},
	{position: [{x: 600,y: 600},{x: 800,y: 600},{x: 800,y: 800},{x: 600,y: 600}],color: "#caff67"}
];
console.log(arr[0].color)
for( var i = 0; i < arr.length; i++) {
	context.beginPath();
	context.moveTo(arr[i].position[0].x,arr[i].position[0].y);
	for( var j = 1; j < arr[i].position.length; j++) {
		context.lineTo(arr[i].position[j].x,arr[i].position[j].y);
	}
	context.closePath();
	context.lineWidth = "2";
	context.stroke();
	context.fillStyle = arr[i].color;
	context.fill();
}

代码为以上，欢迎批评指正。

本文标题:使用Canvas绘制七巧板

文章作者:ChangerHe

发布时间:2016-02-21, 16:23:35

原始链接:http://blog.changerhe.cn/2016/02/21/使用Canvas绘制七巧板/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。