如何解决在 HTML Canvas 中的 mousemove 上使用图像平滑绘制
我在 HTML Canvas 中工作,我试图用图像“绘制”,并使绘图看起来尽可能流畅。想象一下图像是墨水,我想用普通的钢笔画画。我的问题是,当我画画时,画画看起来很卡。
这是一个有效的 jsFiddle:https://jsfiddle.net/tsrgw1na/35/
document.addEventListener("mousedown",mouseDown);
document.addEventListener("mouseup",mouseUp);
document.addEventListener("mousemove",mouseMove);
function mouseDown(event) {
paint = true;
getPosition(event);
x = coord.x;
y = coord.y;
ctx.drawImage(
pic,coord.x - pic.height / 2,coord.y - pic.height / 2,pic.height,pic.height
);
}
function mouseMove(event) {
if (!paint) return;
getPosition(event);
ctx.drawImage(
pic,pic.height
);
/* For loop to draw extra images,which makes it look smoother
if (x != 0 || y != 0) {
let n = 10;
for (let i = 1; i < n + 1; i++) {
ctx.drawImage(
pic,((coord.x - x) * i) / n + x - imageWidth / 2,((coord.y - y) * i) / n + y - imageHeight / 2,imageWidth,imageHeight
);
}
}*/
x = coord.x;
y = coord.y;
}
function mouseUp(event) {
paint = false;
}
function getPosition(event) {
coord.x = event.clientX - canvas.offsetLeft;
coord.y = event.clientY - canvas.offsetTop;
}
我在 mouseMove 函数中尝试了一个 for 循环,以便在每个注册的鼠标位置之间绘制额外的图像。但我不确定这是否是解决我的问题的正确方法。任何提示或帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。