关于ctx.addEventListener is not a function的报错问题，以及获取canvas中鼠标点击的位置坐标

最新推荐文章于 2024-08-02 11:11:46 发布

☆叙

最新推荐文章于 2024-08-02 11:11:46 发布

阅读量4.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_49721447/article/details/112556575

版权

HTML5 canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于ctx.addEventListener is not a function的报错问题

先插入一段代码，是未修改的代码，会产生ctx.addEventListener is not a function的报错。

var cvs = document.getElementById("myCanvas");
			var ctx = cvs.getContext("2d");
			ctx.addEventListener("click",function(event){
				getpieces(c,event);
			})

解决方法：
addEventListener事件监听方法，只能由获取的标签元素调用，也就是代码中的 var cvs = document.getElementById(“myCanvas”); ，即只能由定义的cvs来调用，修改后发现代码正常运行。下面附上正确代码，该代码作用是获取在canvas中鼠标点击的坐标。

<canvas id="myCanvas" width="600" height="600" ></canvas>
		<script type="text/javascript">
			var cvs = document.getElementById("myCanvas");
			var ctx = cvs.getContext("2d");
			cvs.addEventListener("click",function(event){
				getpieces(cvs,event);
			})
			function getpieces(cvs,event){
				var x = event.clientX;
				var y = event.clientY;
				var rect = cvs.getBoundingClientRect();
				x -= rect.left*(cvs.width/rect.width);
				y -=rect.top*(cvs.height/rect.height);
				console.log(x,y);
			}
		</script>