Question

我在Ionic应用程序中有一个HTML画布。

 <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas>

在这个画布中，我正在加载图像。以下是控制器的代码

var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = $stateParams.imageId;

        img.onload = function() {
           context.drawImage(img, 0, 0, canvas.width, canvas.height);
        }

加载图像后，用户需要能够在图像上书写并圈出/突出显示图像的某些区域。

默认情况下，HTML画布不提供此功能吗？现在我无法在图像上注释任何东西。我怎样才能做到这一点？

Answer 1

您需要自己实现。

您可以通过挂钩鼠标单击/移动事件来完成此操作。使用您的2D上下文，如果移动最多且鼠标左键按下，则在鼠标的当前位置绘制小矩形。

效果类似于Windows绘画铅笔工具。这是一个简单的例子。

<html>

<head>
<style>
	canvas{
		border: 1px solid black;
	}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>

<script>
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	
	var isMouseDown = false;
	
	canvas.onmousedown = function(e){
		isMouseDown = true;
	}
	
	canvas.onmouseup = function(e){
		isMouseDown = false;
	}
	
	canvas.onmousemove = function(e){
	
		if(isMouseDown === false){
			return;
		}
	
		var canvasPosition = canvas.getBoundingClientRect();
	
		var x = e.clientX - canvasPosition.left;
		var y = e.clientY - canvasPosition.top;
		
		ctx.fillRect(x, y, 2, 2);
	};
</script>
</body>
</html>

绘制在HTML画布中加载的图像

1 个答案: