canvas画网格
2d游戏中经常用到网格，点击的时候会有一个新的物体放上去很简单 网线是画直线 每个多宽画一条，同样画竖线也是这样，最关键的是确定鼠标在哪个方格中，也很简单鼠标位置处以方格的宽度，就得的整数就是横向的方格位置，竖向同理可得，附上源码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="lib/canvas/canvas-1.2.dev.js">
</script>
<title>测试Canvas 方法</title>
</head>
<body style="padding:0 0 0 0; margin:0 0 0 0;">
<div style="width:100%;height:100%; padding:0 0 0 0; margin:0 0 0 0; font-size:50px;">
<canvas style="background-color:#ffffff; width:100%; height:100%; padding:0 0 0 0; margin:0 0 0 0;" id="ctMs">
</canvas>
</div>
<script type="text/javascript">
var cvs = Canvas("ctMs", 0);
var i = 0;
cvs.clear();
cvs.fillStyle('rgba(0, 0, 255, 0.5)');
cvs.fillRect(150, 100, 100, 50); // ALIGN.LEFT.TOP is the default alignment
cvs.strokeStyle('#333333');
cvs.grid(40, 50);
var positionLayer = cvs.createLayer('position', 0);
positionLayer.onMouseMove = function(x, y){
// clear the canvas and set stroke color to red
this.clear();
this.strokeColor('#FF0000');
// stroke a crossing at mouse coordinates
this.strokeLine(x, 0, x, this.height);
this.strokeLine(0, y, this.width, y);
// display the coordinates as text also
this.fillColor('#FF0000');
this.font('12px Arial');
var currentPos = getCurrentPos(x, y, 40, 50);
this.fillText(currentPos.xs + 'x' + currentPos.ys, x - 4, y + 4, ALIGN.RIGHT.TOP);
this.save();
this.fillStyle('rgba(0, 0, 255, 0.5)');
this.translate(currentPos.xs * 40, currentPos.ys * 50);
this.fillRect(0, 0, 40, 50);
this.restore();
this.renderSingleFrame();
}
cvs.onMouseDown = function(x, y, button){
var currentPos = getCurrentPos(x, y, 40, 50);
var positionLayer = cvs.createLayer('position' + (i++), 0, function(){
this.save();
this.fillStyle('rgba(0, 0, 255, 0.5)');
this.translate(currentPos.xs * 40, currentPos.ys * 50);
this.fillRect(0, 0, 40, 50);
this.restore();
});
}
function getCurrentPos(x, y, xStop, yStop){
var xPos = ~ ~ (x / xStop);
var yPos = ~ ~ (y / yStop)
return {
xs: xPos,
ys: yPos
};
}
</script>
</body>
</html>
截图效果
