更改使用canvas drawImage函数绘制的图像位置

时间:2018-10-11 11:54:40

标签: javascript html canvas

我正在尝试使用画布drawImage()函数绘制图像,然后动态更改每个图像的位置。

图像可以很好地绘制,但是我无法动态更改其在画布中的位置(x,y)。

an example image

此类图标(相机图像)将不止1个,我希望能够根据用户指定的位置移动每个图标。

注意:用户将通过某些输入字段(而不是通过鼠标单击事件)指定位置。

示例代码

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image()
image.src = '/static/camera.png'
image.onload = () => {
  ctx.drawImage(image, 10, 10)
}

TBH我不确定是否可以,因为我无法在线找到任何相关内容/问题?

如果不是,请问有人可以向我指出正确的方向吗?

[编辑]

为了明确起见,我不想再次渲染或重新绘制整个画布,因为它也可能包含其他图像,因此会很宽。我正在寻求解决方案,除了重新绘制职位以外。

0 个答案:

没有答案