一、canvas概要

canvas是HTML5提供更多的一类新条码,双条码;HTML5 canvas条码原素用作绘图的绘出，透过JAVA (一般来说是JavaScript)来顺利完成;canvas条码而已绘图罐子，要采用JAVA来绘出绘图;

Canvas是两个正方形地区的画笔，能用JavaScript在下面油画;

二、事例最终目标

他们那时的最终目标是采用HTML5画笔控制技术制做这款积木小格斗游戏，明确要求将影像分割为3*3的9块魔方并被打乱次序，使用者能终端魔方拆成完备相片。

效用如下表所示右图:

三、程序流程

3.1 HTML动态网页产业布局

<div id=”container”> <!–网页副标题–> <h3>HTML5画笔综合性项目之积木格斗游戏</h3> <!–垂直线–> <hr /> <!–格斗游戏文本–> <!–格斗游戏天数–> <div id=”timeBox”> 总计时间：<span id=”time”>00:00:00</span> </div> <!–格斗游戏画笔–> <canvas id=”myCanvas” width=”300″ height=”300″ style=”border:1px solid”> 抱歉，您的应用程序不全力支持HTML5画笔API。 </canvas> <!–格斗游戏按键–> <div> <button onclick=”restartGame()”> 再次已经开始 </button> </div> </div>

效用如下表所示右图:

他们能看见网页的大体内部结构是早已显露出来了,是金属内部结构早已构筑好了,那时他们要采用css加强式样;

3.2 CSS打造出网页式样

整体背景设置

body { background-color: silver;/*设置网页背景颜色为银色*/ }

格斗游戏界面式样设置

#container { background-color: white; width: 600px; margin: auto; padding: 20px; text-align: center; box-shadow: 10px 10px 15px black; }

格斗游戏天数面板式样设置

#timeBox { margin: 10px 0; font-size: 18px; }

格斗游戏按键式样设置

button { width: 200px; height: 50px; margin: 10px 0; border: 0; outline: none; font-size: 25px; font-weight: bold; color: white; background-color: lightcoral; }

鼠标悬浮时的按键式样设置

button:hover { background-color: coral; }

设置好界面整体式样之后他们得到完备的界面,如下表所示右图:

能看见整体的动态界面早已构筑出来了

3.3 js构建交互效用

ntext对象var img = new Image(); img.src = “image/pintu.jpg”; img.onload = function() { //当相片加载完毕时 generateNum(); //被打乱积木的位置 drawCanvas(); //在画笔上绘出积木 }

3.3.2 初始化积木

需要将素材相片分割成3行3列的9个小魔方，并被打乱顺序放置在画笔上;为了在格斗游戏过程中便于查找当前的地区该显示相片中的哪两个魔方，首先为原相片上的9个小魔方地区进行编号;

定义初始魔方位置

var num = [[00, 01, 02], [10, 11, 12], [20, 21, 22]];

被打乱积木的位置

function generateNum() { //循环50次进行积木被打乱 for (var i = 0; i < 50; i++) { //随机抽取其中两个数据 var i1 = Math.round(Math.random() * 2); var j1 = Math.round(Math.random() * 2); //再随机抽取其中两个数据 var i2 = Math.round(Math.random() * 2); var j2 = Math.round(Math.random() * 2); //对调它们的位置 var temp = num[i1][j1]; num[i1][j1] = num[i2][j2]; num[i2][j2] = temp; } }

绘出积木

自定义名称的drawCanvas()方法用作在画笔上绘出乱序后的相片;

function drawCanvas() { //清空画笔 ctx.clearRect(0, 0, 300, 300); //采用双重for循环绘出3×3的积木 for (var i = 0; i < 3; i++) {awImage(img, col * w, row * w, w, w, j * w, i * w, w, w); // w:300 / 3 = 100(小图宽度) } } } }

如下表所示右图:

3.3.3 事件绑定

监听鼠标监听事件

c.onmousedown = function(e) { var bound = c.getBoundingClientRect() var row = parseInt(y / w); //将x和y换算成几行几列 var col = parseInt(x / w); if (num[row][col] != 22) { //如果当前点击的不是空白地区 detectBox(row, col); //终端点击的魔方 drawCanvas(); //再次绘出画笔 var isWin = checkWin(); //检查格斗游戏是否成功 if (isWin) { //如果格斗游戏成功 clearInterval(timer); //清除计时器 ctx.drawImage(img, 0, 0); //绘出完备相片 ctx.font = “bold 68px serif”; //设置字体为加粗、68号字，serif ctx.fillStyle = “red”; //设置填充色为红色 ctx.fillText(“格斗游戏成功！”, 20, 150); //显示提示语句 } } }

点击魔方终端

3.3.4 格斗游戏计时

自定义函数getCurrentTime()用于进行格斗游戏计时；function getCurrentTime() {

s = parseInt(s); //将时分秒转换为整数以便进行自增或赋值

m = parseInt(m);

h = parseInt(h);

s++; //每秒变量s先自增1

if (s == 60) {

s = 0; //如果秒早已达到60，则归0

m++; //分钟自增1

} if (m == 60) {

m = 0; //如果分钟也达到60，则归0

h++; //小时自增1

} //修改时分秒的显示效用，使其保持两位数

if (s < 10)

s = “0” + s;

if (m < 10)

m = “0” + m;

if (h < 10)

h = “0” + h;

time.innerHTML = h + “:” + m + “:” + s; //将当前计时的天数显示在网页上

}在JavaScript中采用setInterval()方法每隔1秒钟调用getCurrentTime()方法一次，以实现更新效用;var timer = setInterval(“getCurrentTime()”, 1000);

3.3.5 格斗游戏成功与再次已经开始

格斗游戏成功判定与显示效用的实现

自定义函数checkWin()用作进行格斗游戏成功判断;function restartGame() { clearInterval(timer); //清除计时器 s = 0; //天数清零 m = 0; h = 0; getCurrentTime(); //再次显示天数 timer = setInterval(“getCurrentTime()”, 1000); generateNum(); //再次被打乱积木顺序 drawCanvas(); //绘出积木 }如果成功则采用clearInterval()方法清除计时器。然后在画笔上绘出完备相片，并采用fillText()方法绘出出“格斗游戏成功”的文字图样;if (isWin) { //如果格斗游戏成功

clearInterval(timer); //清除计时器

ctx.drawImage(img, 0, 0); //绘出完备相片

ctx.font = “bold 68px serif”; //设置字体为加粗、68号字，serif

ctx.fillStyle = “red”; //设置填充色为红色

ctx.fillText(“格斗游戏成功！”, 20, 150); //显示提示语句

}