如何解决像素化线,无法在CANVAS中精确绘制线
我正在尝试使用HTML中的canvas标签进行绘制。当CSS中未指定宽度和高度时,一切正常。但是,当我在CSS中增加画布大小时,会得到像素化的线条,并且这些线条绘制在远离单击鼠标的位置。
HTML代码:
<canvas></canvas>
JS:
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.strokeStyle = "red";
context.lineJoin = "round";
context.lineCap = "round";
let draw = false;
let lastX = 0;
let lastY = 0;
function drawing(e)
{
if (!draw)
return;
context.beginPath();
context.moveTo(lastX,lastY);
context.lineTo(e.offsetX,e.offsetY);
context.stroke();
[lastX,lastY] = [e.offsetX,e.offsetY];
console.table(e.clientX,e.offsetX);
}
canvas.addEventListener("mousemove",drawing);
canvas.addEventListener("mouseup",() => draw = false);
canvas.addEventListener("mouseout",() => draw = false );
canvas.addEventListener("mousedown",e => {
draw = true;
[lastX,e.offsetY];
});
在此默认代码中,一切正常。但是,当我使用这样的CSS更改画布的宽度和高度时,就会出现问题。
canvas {
width: 600px;
height: 600px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。