HTML5 Canvas翻译(0.5,0.5)不能修复线条模糊 [英] HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
问题描述
阅读
Retina& HiDPI设备
查看您提供的图像。画布的分辨率是显示屏的一半。放大并查看X上的像素,DOM线是1px,但仍然是该字母上像素的两倍宽。这意味着画布被拉伸,并且模糊是由双线性过滤引起的。您可以在标签上缩小或者您有视网膜或HiDPI显示屏。设置 canvas.width
& canvas.height
为它的两倍,设置 canvas.style.width
& canvas.style.height
到DOM像素。删除 ctx.translate
并添加 ctx.scale(2,2)
并且所有内容都将清除。
$ b 放大图片 //i.stack.imgur.com/YzfCo.pngrel =nofollow noreferrer>
Reading related articles, I've tried forcing the canvas size in pixels, specifying half pixels for the paths and also context.translate(0.5) but my canvas lines are still blurry.
const ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5);
/* 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();
};
Where am I going wrong and how can I make my lines crisp like the border around the boxes in the demo?
How it appears for me:
Retina & HiDPI devices
Looking at the image you supplied. The canvas is half the resolution of the display. Zoom in and look at the pixels on the "X", The DOM line is 1px yet still twice a wide as the pixels on that letter. That means the canvas is being stretched and the blur is due to the bilinear filtering. Either you are zoomed out on the tab or you have a retina or HiDPI display. Set the canvas.width
& canvas.height
to twice what it is, set the canvas.style.width
& canvas.style.height
to DOM pixels. Remove the ctx.translate
and add ctx.scale(2,2)
and all things will be clear.
A zoom in on the image
这篇关于HTML5 Canvas翻译(0.5,0.5)不能修复线条模糊的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!