如何在Safari瀏覽器/ Chrome/Firefox中在<canvas>中繪製對角線？

在支持HTML5的瀏覽器，該代碼繪製一條對角線：如何在Safari瀏覽器/ Chrome/Firefox中在<canvas>中繪製對角線？

<!DOCTYPE html><html><body><script> 
var canvas = document.createElement('canvas'); 
canvas.width = 100; 
canvas.height = 100; 
var ctx = canvas.getContext('2d'); 
ctx.strokeStyle = 'black'; 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(100, 100); 
ctx.lineWidth = 1; 
ctx.stroke(); 
document.body.appendChild(canvas); 
</script></body></html>

然而，渲染看起來完全不同的Safari：

（鉻49.0，火狐45.0，Safari瀏覽器9.0從左到右）。

也就是說，在Safari中，該線看起來厚度是其他兩倍。

我可以在所有三種瀏覽器中做任何事情讓行看起來完全相同嗎？

來源

2016-03-24 GladstoneKeep

不同之處在於瀏覽器反鋸齒的方式不同。

您不能覆蓋或關閉畫布元素上的消除鋸齒效果，因此您不得不跨越瀏覽器使用不同的線條渲染。

唯一確定的解決方法是逐個像素地繪製自己的線。您可以使用Bresenham's line algorithm來創建您的線。

這裏的示例代碼和演示：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
 
var data = imgData.data; 
 

 
bresnehamLine(25,25, 250, 125); 
 
ctx.putImageData(imgData, 0, 0); 
 

 

 
function setPixel(x, y) { 
 
    var n = (y * canvas.width + x) * 4; 
 
    data[n] = 0; 
 
    data[n + 1] = 0; 
 
    data[n + 2] = 255; 
 
    data[n + 3] = 255; 
 
} 
 

 
// Attribution: https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html 
 
function bresnehamLine(x0, y0, x1, y1) { 
 
    var dx = Math.abs(x1 - x0), 
 
     sx = x0 < x1 ? 1 : -1; 
 
    var dy = Math.abs(y1 - y0), 
 
     sy = y0 < y1 ? 1 : -1; 
 
    var err = (dx > dy ? dx : -dy)/2; 
 
    while (true) { 
 
    var n = (y0*canvas.width+x0)*4; 
 
    data[n] = 0; 
 
    data[n + 1] = 0; 
 
    data[n + 2] = 255; 
 
    data[n + 3] = 255; 
 
    if (x0 === x1 && y0 === y1) break; 
 
    var e2 = err; 
 
    if (e2 > -dx) { 
 
     err -= dy; 
 
     x0 += sx; 
 
    } 
 
    if (e2 < dy) { 
 
     err += dx; 
 
     y0 += sy; 
 
    } 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

來源

2016-03-25 00:02:48 markE

如何在Safari瀏覽器/ Chrome/Firefox中在<canvas>中繪製對角線？

回答

相關問題