提高在 Windows/Linux 机器的 Canvas 中渲染时的线条清晰度(设备像素比率 < 2)？

Question

我正在尝试使用HTML Canvas(2d 上下文)绘制类似网格的结构，但是在将我的画布网格与 Div 网格进行比较时，我的网格的线条清晰度模糊、粗且差。请帮忙。

context.strokeWidth = 1;
context.lineWidth   = 1;
function scaleCanvas(canvas, width, height) {
var ratio           = Math.ceil(Math.max(window.devicePixelRatio, 1));
var context         = canvas.getContext('2d'); 
canvas.width        = width * ratio;
canvas.height       = height * ratio;
canvas.style.width  = width + 'px';
canvas.style.height = height + 'px';
context.scale(ratio, ratio);
}  

Answer 1

您能否上传所有代码，包括 HTML，以便它可以运行。

你可以做的是将一个类添加到你的HTML标签中，这样你就可以使用Javascript编辑类，而不是直接添加内联样式。您可以使用getElementByClass(your_class)查找该元素。

为了更好地解决您的问题，我需要查看更多您的代码。尝试使用Jsfiddle或Codepen！