Reading related https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry articles https://stackoverflow.com/questions/3991113/html5-canvas-stroke-thick-and-fuzzy，我尝试强制画布大小以像素为单位，指定路径的半像素以及 context.translate(0.5) 但我的画布线仍然模糊。
const boxContainer = document.querySelector('.boxes');
const canvas = document.getElementById("canvas");
canvas.width = boxContainer.offsetWidth * 2;
canvas.height = boxContainer.offsetHeight * 2;
canvas.style.width = boxContainer.offsetWidth + 'px';
canvas.style.height = boxContainer.offsetHeight + 'px';
const ctx = canvas.getContext("2d");
ctx.scale(2, 2);
/* Function to draw HTML5 canvas line */
const drawPath = (startX, startY, endX, endY) => {
ctx.beginPath();
ctx.lineWidth = "1";
ctx.strokeStyle = "red";
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
};
/* Return coords for different points of element */
const getCoords = (elem, corner) => {
let coords = {};
switch (corner) {
case 'bottomRight':
coords.x = elem.offsetLeft + elem.offsetWidth;
coords.y = elem.offsetTop + elem.offsetHeight;
break;
case 'bottomLeft':
coords.x = elem.offsetLeft;
coords.y = elem.offsetTop + elem.offsetHeight;
break;
case 'topRight':
coords.x = elem.offsetLeft + elem.offsetWidth;
coords.y = elem.offsetTop;
break;
case 'topLeft':
coords.x = elem.offsetLeft;
coords.y = elem.offsetTop;
break;
}
return coords;
};
/* Get coords for all points */
let boxData = {};
let boxes = document.querySelectorAll('.box');
boxes.forEach((boxElem, index) => {
boxData['box' + parseInt(index + 1)] = {
x: getCoords(boxElem, boxElem.getAttribute('data-path-point')).x,
y: getCoords(boxElem, boxElem.getAttribute('data-path-point')).y
};
});
/* Start the drawing! */
drawPath(boxData.box1.x, boxData.box1.y,
boxData.box4.x, boxData.box4.y);
drawPath(boxData.box2.x, boxData.box2.y,
boxData.box3.x, boxData.box3.y);.boxes {
max-width: 500px;
position: relative;
}
.box {
display: inline-block;
width: 120px;
margin-left: 10%;
margin-bottom: 10%;
padding: 20px;
border: 1px solid red;
}
#canvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}<div class="boxes">
<canvas id="canvas"></canvas>
<div data-path-point="bottomRight" id="box1" class="box box-pair1">a<br>b<br>x<br>y<br>z<br></div>
<div data-path-point="bottomLeft" id="box2" class="box box-pair2">x<br>y<br>z<br></div>
<div data-path-point="topRight" id="box3" class="box box-pair2">x<br>y<br>z<br></div>
<div data-path-point="topLeft" id="box4" class="box box-pair1">x<br>y<br>z<br></div>
</div>我哪里出错了，如何使我的线条像演示中盒子周围的边框一样清晰？
How it appears for me:
查看您提供的图像。画布的分辨率是显示器分辨率的一半。放大并查看“X”上的像素，DOM 线为 1 像素，但宽度仍然是该字母上像素的两倍。这意味着画布被拉伸，并且模糊是由于双线性过滤造成的。您要么缩小了选项卡，要么使用了 Retina 或 HiDPI 显示屏。设置canvas.width & canvas.height为两倍，设置canvas.style.width & canvas.style.height到 DOM 像素。去除ctx.translate并添加ctx.scale(2,2)一切都会变得清晰。
放大图像