HTML 给canvas矩形添加监听事件

最新推荐文章于 2024-08-20 03:01:37 发布

会宇

最新推荐文章于 2024-08-20 03:01:37 发布

阅读量3k

点赞数 1

分类专栏： html 文章标签： HTM canvas event

本文链接：https://blog.csdn.net/qq_39237554/article/details/84752165

版权

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给canvas矩阵添加事件</title>
<style>
    canvas{border:1px solid;}
</style>
</head>

<body>
    <canvas id="canvas" width=500 height=500 ></canvas>
    <button onclick="clears();" >清除</button>
</body>
<script>
    var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var x = 100, y = 100, w = 100, h = 100;
	
	run("red");
	
	// 生成矩阵
	function run(color){
		clears();
		ctx.fillStyle = color;
		ctx.fillRect(x, y, w, h);
	}
	// 清除画布
	function clears(){
		ctx.beginPath();
		ctx.clearRect(0, 0, 500, 500);
		ctx.closePath();
	}
	// 监听画布
	canvas.addEventListener("mousemove" , function(e){
		// 鼠标x轴 >= 矩阵x轴 && 鼠标x轴 <= 矩阵x轴 + 矩阵宽度
		// 鼠标y轴 >= 矩阵y轴 && 鼠标y轴 <= 矩阵y轴 + 矩阵高度
		if(e.layerX >= x && e.layerX <= x + w && e.layerY >= y && e.layerY <= y + h){
			run("black");
		}else{
			run("red");
		}
	});
</script>
</html>