效果
精灵表坐标查看器效果代码 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
var canvas = document.getElementById('canvas'),
readout = document.getElementById('readout'),
context = canvas.getContext('2d'),
spritesheet = new Image();
// Functions.............................................
/**
* windowToCanvas()方法在canvas对象上调用getBoundingClientRect()方法，来获取canvas元素的边界框(bounding box)，
* 该边界框的坐标是相对于整个窗口的。然后，windowToCanvas()方法返回了一个对象，其x与y属性分别对应于鼠标在canvas之中的坐标。
* 注意：windowToCanvas()方法不只是将canvas边界框的x、y坐标从窗口坐标中减去，而且在canvas元素大小与绘图表面大小不相符时，
* 它还对这两个坐标进行了缩放。
* 例如：canvas的宽高是：100X100，CSS的宽高是200X200，假设left = 100,top = 100
* 不缩放：window坐标(160,160) ==>> 在canvas上的坐标是(60,60)
* 缩放½： window坐标(160,160) ==>> 在canvas上的坐标是(30,30)
* 就是将减去偏移量后的部分乘以缩放比
*/
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) };
}
// 绘制背景横线，每隔12像素画一条线
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); // 左边线，x=0在左边
context.lineTo(context.canvas.width, y + 0.5);
context.stroke();
}
// 绘制垂直线
function drawVerticalLine(x) {
context.beginPath();
context.moveTo(x + 0.5, 0); // 上边线，y = 0在上边
context.lineTo(x + 0.5, context.canvas.height);
context.stroke();
}
// Event handlers....................................................
canvas.onmousemove = function(e){
var loc = windowToCanvas(canvas,e.clientX,e.clientY);
drawBackground(); // 绘制背景横线
drawSpritesheet(); // 绘制图片
drawGuidelines(loc.x,loc.y); // 绘制十字线
updateReadout(loc.x,loc.y); // 更新文本
}
// Initialization....................................................
spritesheet.src = 'running-sprite-sheet.png';
spritesheet.onload = function(e){
drawSpritesheet();
}
drawBackground();
</script>
</body>
</html>
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)