前端canvas绘图,利用canvas在图片上面绘制标记以及给canvas添加点击事件。

前端canvas绘图,利用canvas在图片上面绘制标记以及给canvas添加点击事件。
需要实现的效果如下图:
在这里插入图片描述
首先需要一个承载的核心画布

<canvas id="canvas" width="800" height="600"></canvas>

全部代码:

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>canvas</title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600"></canvas>
	</body>
</html>
<script type="text/javascript">
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	//绘制背景图
	var backgroundImg = new Image();
	backgroundImg.src = "ditu.png"; //可以是本地图片地址
	backgroundImg.onload = function() {
		//这里要注意,canvas.width,canvas.height要等于这个就是你的Canvas width height
		ctx.drawImage(this, 0, 0, canvas.width, canvas.height); // 绘制底图
		var topImg = new Image();
		//topImg.src = 'https://www.baidu.com/static/imgs/cw.jpg'; 此处可以网络地址
		topImg.src = "jizhong_n.png";
		topImg.onload = function() {
			var x = 680; // 假设你想在底图上的(680, 150)位置绘制上图
			var y = 150;
			ctx.drawImage(topImg, x, y); // 绘制上图
		}

		var topImg = new Image();
		topImg.src = "jizhong_n.png";
		topImg.onload = function() {
			var x = 580;
			var y = 250;
			ctx.drawImage(topImg, x, y); // 绘制上图
		}

		var topImg = new Image();
		topImg.src = "jizhong_n.png";
		topImg.onload = function() {
			var x = 130;
			var y = 350;
			ctx.drawImage(topImg, x, y); // 绘制上图
		}
	}

	//点击事件
	canvas.addEventListener('mousedown', function(e) {
		var x = e.offsetX,
			y = e.offsetY;
		// 检查点击的位置是否在蓝色矩形内
		if (x >= 684 && x <= 722 && y >= 152 && y <= 207) {
			alert('您点击了第1个蓝色区域!');
		}
		if (x >= 585 && x <= 621 && y >= 251 && y <= 310) {
			alert('您点击了第2个蓝色区域!');
		}
		console.log(x + "---" + y);
	});
</script>
  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值