精灵表坐标查看器-canvas学习第三天

最新推荐文章于 2025-01-11 16:52:32 发布

原创最新推荐文章于 2025-01-11 16:52:32 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #canvas #JavaScript

网页学习专栏收录该内容

8 篇文章

订阅专栏

这篇博客展示了如何利用JavaScript和HTML的canvas元素创建一个精灵表坐标查看器。通过JavaScript代码控制，配合HTML结构，实现了图片的展示和操作功能。

先来看效果图在这里插入图片描述
JavaScript的代码

var canvas = document.getElementById('canvas'),
	readout = document.getElementById('readout'),
	context = canvas.getContext('2d'),
	spritesheet = new Image();
 
 
//Functions
//将鼠标坐标转换成canvas坐标
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();
		//绘画从（0，i）绘制到（context.canvas.width,i）这条直线通过moveTo和lineTo函数进行绘画的
		context.moveTo(0,i);
		context.lineTo(context.canvas.width,i);
		context.stroke();
		i -=VERTICAL_LINE_SPACING;
 
	}
}
 
//绘画精灵表
function drawSpritesheet(){
	//drawImage(图片，x，y)
	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) {
	//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
	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();
}
//鼠标移动的位置
canvas.onmousemove = function (e) {
	var loc = windowToCanvas(canvas,e.clientX,e.clientY);
 
	drawBackground();
	drawSpritesheet();
	drawGuidelines(loc.x,loc.y);
	updateReadout(loc.x,loc.y);
}
//导入图片
spritesheet.src = 'a.png';
spritesheet.onload = function(e){
	drawSpritesheet();
}
//绘画
drawBackground();

HTML的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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='js/sprites.js'></script>
</body>
</html>

图片随意找一张即可