canvas（11/30）--------事件处理（鼠标处理）精灵表坐标查看器

最新推荐文章于 2021-06-04 04:57:30 发布

蜜糖雪兒

最新推荐文章于 2021-06-04 04:57:30 发布

阅读量350

点赞数

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/ydmichelle/article/details/78677047

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

鼠标处理

使用监听器，可以通过onmousemove，onmouseup，onmouseout或者onmousedown来注册监听器。

使用onmousedown，onmousemove这样的方式来注册监听器，比调用addEventListener（）要稍微简单一点，如果鼠标事件要注册多个监听器的时候，那就要使用addEventListener（）。

实现精灵表坐标查看器：

examp1.js

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：

<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='example1.js'></script>
</body>
</html>

还需要一张图片：a.png