我在 Ionic 应用程序中有一个 HTML Canvas 。
<canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas>
在此 Canvas 中，我正在加载图像。以下是 Controller 的代码
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 canvas 默认不提供此功能吗？现在我无法在图像上注释任何内容。我怎样才能实现这个目标？
最佳答案
您需要自己实现。
您可以通过 Hook 鼠标单击/移动事件来完成此操作。使用 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>关于javascript - 在 HTML Canvas 内加载的图像上绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39376084/