第一章 基础知识
第六节 事件处理
程序清单1-5 精灵表坐标查看器的HTML代码
<!DOCTYPE html>
<head>
<title>Sprite sheets</title>
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
left: 0px;
top: 20px;
margin: 20px;
background: #ffffff;
border: thin inset rgba(100,150,230,0.5);
cursor: pointer;
}
#readout {
margin-top: 10px;
margin-left: 15px;
color: blue;
}
</style>
</head>
<body>
<div id='readout'></div>
<canvas id='canvas' width='500' height='250'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
程序清单1-6 精灵表坐标查看器的JavaScript代码
var canvas = document.getElementById('canvas'),
readout = document.getElementById('readout'),
context = canvas.getContext('2d'),
spritesheet = new Image();
//Functions..........................................................
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width /bbox.width),
y: y - bbox.top * (canvas.height /bbox.height)
};
}
function drawBackground() {
var VERTICAL_LINE_SPACING = 12,
i = context.canvas.height;
context.clearRect(0,0,canvas.width,canvas.height);
context.strokeStyle = 'lightgray';
context.lineWidth = 0.5;
while(i > VERTICAL_LINE_SPACING*4) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
i -= VERTICAL_LINE_SPACING;
}
}
function drawSpritesheet() {
context.drawImage(spritesheet, 0, 0);
}
function drawGuidelines(x, y) {
context.strokeStyle = 'rgba(0,0,230,0.8)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
}
function updateReadout(x, y) {
readout.innerText = '(' + x.toFixed(0) + ', '+ y.toFixed(0) + ')';
}
function drawHorizontalLine (y) {
context.beginPath();
context.moveTo(0,y + 0.5);
context.lineTo(context.canvas.width, y + 0.5);
context.stroke();
}
function drawVerticalLine (x) {
context.beginPath();
context.moveTo(x + 0.5, 0);
context.lineTo(x + 0.5,context.canvas.height);
context.stroke();
HTML5 Canvas核心技术—图形、动画与游戏开发
- 作者：
- David.Geary
- 类别：
- 基础信息化
- 出版社：
- 华章出版社
- 出版时间：
- 2013年5月
- 定价：
- ￥99.00
- 京东价：￥79.70
实际售价以e-works战略合作伙伴当日售价为准