Wie kann ich eine diagonale Linie in <canvas> zeichnen, die in Safari/Chrome/Firefox die gleiche aussieht?

In Browsern, die HTML5, dieser Code unterstützen zeichnet eine diagonale Linie:Wie kann ich eine diagonale Linie in <canvas> zeichnen, die in Safari/Chrome/Firefox die gleiche aussieht?

<!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>

jedoch die Wiedergabe in Safari drastisch anders aussieht:

(Chrome 49.0, Firefox 45.0, Safari 9.0 von links nach rechts.)

Dh, in Safari sieht die Linie etwa doppelt so dick aus wie die anderen.

Kann ich alles tun, damit die Zeile in allen drei Browsern identisch aussieht?

Quelle

2016-03-24 GladstoneKeep

Der Unterschied wird durch die unterschiedlichen Möglichkeiten verursacht, mit denen Browser Ihre Zeile anti-aliasieren.

Sie können das Anti-Aliasing auf dem Canvas-Element nicht übersteuern oder abschalten, sodass Sie in den verschiedenen Browserdarstellungen mit den verschiedenen Linienrendern nicht weiterkommen.

Die einzige sichere Problemumgehung ist, Ihre eigene Zeile Pixel für Pixel zu zeichnen. Sie können Bresenham's line algorithm verwenden, um Ihre Zeile zu erstellen.

Hier ist Beispielcode und eine Demo:

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>

Quelle

2016-03-25 00:02:48 markE

Wie kann ich eine diagonale Linie in <canvas> zeichnen, die in Safari/Chrome/Firefox die gleiche aussieht?

Antwort

Verwandte Themen