整体思路
在上一篇中是通过页面元素实现的最终效果，下面尝试用canvas的方式实现。
这里需要两个canvas进行叠加，一个用来绘制底层的棋盘背景，另一个用来绘制小方块。
首先是HTML代码:
<div id="canvas_box">
<canvas id="canvas_bg" width="441" height="441">A drawing of table</canvas>
<canvas id="canvas_square" width="40" height="40">A drawing of table</canvas>
</div>
配置基本样式
<style type="text/css">
#canvas_box{
position: relative;
}
#canvas_box #canvas_bg{
position: absolute;
left:0;
top:0;
}
#canvas_box #canvas_square{
position: absolute;
}
</style>
然后，在createBg.js中绘制底层棋盘背景
(function(){
var drawing = $("#canvas_bg");
if(drawing.getContext){
var context = drawing.getContext("2d");
creataBg(context);
createXY(context);
}
//创建棋盘背景
function creataBg(context){
context.strokeStyle = "#ccc";
context.translate(0.5,0.5);
context.lineWidth = 1;
context.beginPath();
var x = 40,y=40;
for(var i=0;i<11;i++){
context.moveTo(x,y);
context.lineTo(x,440);
x += 40;
}
x = 40;y=40;
for(var j=0;j<11;j++){
context.moveTo(x,y);
context.lineTo(440,y);
y += 40;
}
context.stroke();
context.closePath();
}
//创建x,y坐标值
function createXY(context){
context.font = "normal 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
var x = 60,y=60;
for(var i=1;i<11;i++){
context.fillText(i,x,20);
x += 40;
}
for(var i=1;i<11;i++){
context.fillText(i,20,y);
y += 40;
}
}
})();
创建一个square类，两个属性，分别保存页面方块元素和该方块的方向。同时，在其原型中增添两个方法，一个是create方法，用于创建方块；一个为go方法，用于移动方块。
function Square(square){
this.square = square;
this.direction = "right";
}
Square.prototype = {
create : function(){
var context = this.square.getContext("2d");
switch(this.direction){
case 'top':
createTop(context);
break;
case 'bottom':
createBottom(context);
break;
case 'left':
createLeft(context);
break;
case 'right':
createRight(context);
break;
};
if(this.square.style.left == ""){
this.square.style.left = "40px";
this.square.style.top = "40px";
}
function createTop(context){
var gra = context.createLinearGradient(0,0,0,40);
gra.addColorStop(0,"red");
gra.addColorStop(0.2,"red");
gra.addColorStop(0.2,"blue");
gra.addColorStop(1,"blue");
context.fillStyle = gra;
context.fillRect(0,0,40,40);
};
function createBottom(context){
var gra = context.createLinearGradient(0,0,0,40);
gra.addColorStop(0,"blue");
gra.addColorStop(0.8,"blue");
gra.addColorStop(0.8,"red");
gra.addColorStop(1,"red");
context.fillStyle = gra;
context.fillRect(0,0,40,40);
};
function createLeft(context){
var gra = context.createLinearGradient(0,0,40,0);
gra.addColorStop(0,"red");
gra.addColorStop(0.2,"red");
gra.addColorStop(0.2,"blue");
gra.addColorStop(1,"blue");
context.fillStyle = gra;
context.fillRect(0,0,40,40);
};
function createRight(context){
var gra = context.createLinearGradient(0,0,40,0);
gra.addColorStop(0,"blue");
gra.addColorStop(0.8,"blue");
gra.addColorStop(0.8,"red");
gra.addColorStop(1,"red");
context.fillStyle = gra;
context.fillRect(0,0,40,40);
};
},
go : function(){
console.log("gogogo");
switch(this.direction){
case 'right':
var y = parseInt(this.square.style.left);
if(y<400){
y += 40;
this.square.style.left = (y + "px");
}else{
alert("已到达右侧边缘");
}
break;
case 'left':
var y = parseInt(this.square.style.left);
if(y>40){
y -= 40;
this.square.style.left = (y + "px");
}else{
alert("已到达左侧边缘");
}
break;
case 'top':
var x = parseInt(this.square.style.top);
if(x>40){
x -= 40;
this.square.style.top = (x + "px");
}else{
alert("已到达顶部边缘");
}
break;
case 'bottom':
var x = parseInt(this.square.style.top);
if(x<400){
x += 40;
this.square.style.top = (x + "px");
}else{
alert("已到达底部边缘");
}
break;
};
}
}
最后在app.js中new一个square对象，绑定相关事件，通过事件调用对象的相关方法。
var square = new Square($("#canvas_square"));
square.create();
//绑定键盘事件
addHandler(document,"keydown",function(e){
// console.log(e.keyCode);
switch(e.keyCode){
case 37:
square.direction = "left";
square.create();
break;
case 38:
square.direction = "top";
square.create();
break;
case 39:
square.direction = "right";
square.create();
break;
case 40:
square.direction = "bottom";
square.create();
break;
case 32: //按回车和空格前进
case 13:
square.go();
break;
}
});