HTML 畫布線條顏色不准確

Question

有人可以解釋為什么畫布不遵守顏色選擇以及如何修復它以便它以“真實”顏色繪制？ 我知道畫布使用 0.5 像素坐標，所以我嘗試使用 0.5 增量繪制，但它仍然使用時髦的顏色繪制（使用 ColorCop 放大並檢查每個像素的顏色：

這是一個應該繪制藍線的小片段，兩條線彼此相鄰，第三條線相距 1 個像素，結果是只有第一行是真正的藍色，其他所有東西都是紫色或更糟，包括第一行的第一個/最后一個像素：

 const canvas = document.getElementById("line"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 100; ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.imageSmoothingEnabled = false; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

 <canvas id="line"></canvas>

我的顯示器分辨率為 2560x1440，縮放比例為 100%。 不使用系統/瀏覽器/軟件或任何類型的縮放/縮放。 如果我在 MS Paint 中繪制一個像素，我會在顯示器上看到一個像素，沒有抗鋸齒，沒有偽影。

Answer 1

這樣做，您的畫布將顯示高分辨率像素

1. 將畫布寬度和高度設置為（所需寬度和高度）* devicePixelRatio * 2

2. 使用 css 樣式屬性將其重新分配為您想要的寬度和高度

3. 尺度上下文 2, 2

   默認情況下，畫布上的一個單位正好是一個像素。 縮放轉換會修改此行為。 例如，縮放因子為 0.5 導致單位大小為 0.5 像素； 因此，形狀以正常尺寸的一半繪制。 同樣，縮放因子為 2.0 會增加單元大小，使一個單元變為兩個像素； 因此，形狀以正常尺寸的兩倍繪制。

 const width = height = 100 const pixelRatio = window.devicePixelRatio * 2; const canvas = document.getElementById('line'); canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const ctx = canvas.getContext("2d"); ctx.scale(pixelRatio, pixelRatio); ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

 <canvas id="line"></canvas>

Answer 2

您可能使用的是高分辨率顯示器。 CSS 將縮放您的畫布並創建抗鋸齒。

為了克服這個問題，您可以將畫布的大小乘以顯示器的像素比，然后使用 CSS 縮小到預期大小：

 const canvas = document.getElementById("line"), ctx = canvas.getContext("2d"), dPR = window.devicePixelRatio; // multiply by dPR canvas.width = canvas.height = 100 * dPR; // downscale through CSS canvas.style.width = canvas.style.height = "100px"; ctx.scale(dPR, dPR); ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.imageSmoothingEnabled = false; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

 <canvas id="line"></canvas>