canvas学习2（click事件）

最新推荐文章于 2024-08-10 05:02:47 发布

BetterBOB

最新推荐文章于 2024-08-10 05:02:47 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/u012844719/article/details/18797801

版权

博客介绍了如何在canvas中实现click事件，并通过鼠标坐标判断触发事件的组件，重点在于事件绑定和坐标判断的实现。

摘要由CSDN通过智能技术生成

这次实现了canvas内部组件的click事件

因为绑定事件只能给canvas本身绑定，所以在判断是那个组件触发click要根据鼠标的坐标来判断。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#myCanvas {
	border:1px solid #000;
}
</style>
</head>
<body>
	<canvas id="myCanvas" height="500" width="500"></canvas>
</body>
<script type="text/javascript">
	
	var canvas = document.getElementById("myCanvas");
	
	var y = 250;
	var x = 150;
	var flag = "right";
	var ctx = canvas.getContext("2d");
	setInterval(function(){
		aa(ctx);
	},1);
	
	function aa(ctx){
		ctx.clearRect(0,0,500,500);
		ctx.fillStyle = "red"; 
		ctx.fillText("HelloCanvas!", 10, 35);  
		//ctx.save();