Was ist der beste Weg, um ein einzelnes Pixel in einer HTML5-Zeichenfläche festzulegen?

Der HTML5-Canvas verfügt über keine Methode zum expliziten Festlegen eines einzelnen Pixels.

Es ist möglicherweise möglich, ein Pixel mit einer sehr kurzen Linie zu setzen, aber dann können Antialisierung und Linienkappen stören.

Eine andere Möglichkeit könnte darin bestehen, ein kleines ImageDataObjekt zu erstellen und Folgendes zu verwenden:

context.putImageData(data, x, y)

um es in Position zu bringen.

Kann jemand einen effizienten und zuverlässigen Weg beschreiben, dies zu tun?

Es gibt zwei beste Anwärter:

1. Erstellen Sie 1 × 1-Bilddaten, stellen Sie die Farbe ein und legen Sie putImageDataFolgendes fest:

   var id = myContext.createImageData(1,1); // only do this once per page
   var d  = id.data;                        // only do this once per page
   d[0]   = r;
   d[1]   = g;
   d[2]   = b;
   d[3]   = a;
   myContext.putImageData( id, x, y );     

2. Verwenden Sie fillRect()diese Option, um ein Pixel zu zeichnen (es sollten keine Aliasing-Probleme auftreten):

   ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
   ctx.fillRect( x, y, 1, 1 );

Sie können die Geschwindigkeit hier testen: http://jsperf.com/setting-canvas-pixel/9 oder hier https://www.measurethat.net/Benchmarks/Show/1664/1

Ich empfehle, mit Browsern zu testen, die Ihnen wichtig sind, um maximale Geschwindigkeit zu erzielen. Ab Juli 2017 fillRect()ist Firefox v54 und Chrome v59 (Win7x64) 5-6 × schneller.

Andere, albernere Alternativen sind:

• Verwenden getImageData()/putImageData()auf der gesamten Leinwand; Dies ist ungefähr 100 × langsamer als bei anderen Optionen.

• Erstellen eines benutzerdefinierten Bildes mithilfe einer Daten-URL und Anzeigen drawImage():

  var img = new Image;
  img.src = "data:image/png;base64," + myPNGEncoder(r,g,b,a);
  // Writing the PNGEncoder is left as an exercise for the reader

• Erstellen Sie ein weiteres Bild oder eine Leinwand, die mit allen gewünschten Pixeln gefüllt ist, und verwenden Sie drawImage()diese Option, um nur die gewünschten Pixel zu verteilen. Dies wäre wahrscheinlich sehr schnell, hat jedoch die Einschränkung, dass Sie die benötigten Pixel vorberechnen müssen.

Beachten Sie, dass meine Tests nicht versuchen, den Canvas-Kontext zu speichern und wiederherzustellen fillStyle. Dies würde die fillRect()Leistung verlangsamen . Beachten Sie auch, dass ich nicht mit einer sauberen Tafel beginne oder für jeden Test genau den gleichen Satz von Pixeln teste.

Eine Methode, die nicht erwähnt wurde, ist die Verwendung von getImageData und dann putImageData.
Diese Methode ist gut geeignet, wenn Sie schnell viel auf einmal zeichnen möchten.
http://next.plnkr.co/edit/mfNyalsAR2MWkccr

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  var pixels = id.data;

    var x = Math.floor(Math.random() * canvasWidth);
    var y = Math.floor(Math.random() * canvasHeight);
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var off = (y * id.width + x) * 4;
    pixels[off] = r;
    pixels[off + 1] = g;
    pixels[off + 2] = b;
    pixels[off + 3] = 255;

  ctx.putImageData(id, 0, 0);

Ich hatte nicht darüber nachgedacht fillRect(), aber die Antworten spornten mich an, es zu vergleichen putImage().

Das Platzieren von 100.000 zufällig gefärbten Pixeln an zufälligen Orten mit Chrome 9.0.597.84 auf einem (alten) MacBook Pro dauert weniger als 100 ms putImage(), aber fast 900 ms fillRect(). (Benchmark-Code unter http://pastebin.com/4ijVKJcC ).

Wenn ich stattdessen eine einzelne Farbe außerhalb der Schleifen auswähle und diese Farbe nur an zufälligen Stellen putImage()zeichne , dauert dies 59 ms gegenüber 102 ms fillRect().

Es scheint, dass der Aufwand für das Generieren und Parsen einer CSS-Farbspezifikation in der rgb(...)Syntax für den größten Teil des Unterschieds verantwortlich ist.

Das direkte Einfügen von rohen RGB-Werten in einen ImageDataBlock erfordert hingegen keine Behandlung oder Analyse von Zeichenfolgen.

function setPixel(imageData, x, y, r, g, b, a) {
    var index = 4 * (x + y * imageData.width);
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}

Da unterschiedliche Browser unterschiedliche Methoden zu bevorzugen scheinen, ist es möglicherweise sinnvoll, im Rahmen des Ladevorgangs einen kleineren Test mit allen drei Methoden durchzuführen, um herauszufinden, welche am besten zu verwenden ist, und diese dann in der gesamten Anwendung zu verwenden.

Es scheint seltsam, aber dennoch unterstützt HTML5 das Zeichnen von Linien, Kreisen, Rechtecken und vielen anderen Grundformen. Es gibt nichts, was zum Zeichnen des Grundpunkts geeignet ist. Die einzige Möglichkeit, dies zu tun, besteht darin, Punkte mit allem zu simulieren, was Sie haben.

Grundsätzlich gibt es also 3 mögliche Lösungen:

• Punkt als Linie zeichnen
• Punkt als Polygon zeichnen
• Punkt als Kreis zeichnen

Jeder von ihnen hat seine Nachteile

Linie

function point(x, y, canvas){
  canvas.beginPath();
  canvas.moveTo(x, y);
  canvas.lineTo(x+1, y+1);
  canvas.stroke();
}

Denken Sie daran, dass wir in Richtung Südosten ziehen. Wenn dies der Rand ist, kann es ein Problem geben. Sie können aber auch in eine andere Richtung zeichnen.

Rechteck

function point(x, y, canvas){
  canvas.strokeRect(x,y,1,1);
}

oder schneller mit fillRect, da die Render-Engine nur ein Pixel ausfüllt.

function point(x, y, canvas){
  canvas.fillRect(x,y,1,1);
}

Kreis

Eines der Probleme mit Kreisen ist, dass es für eine Engine schwieriger ist, sie zu rendern

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.stroke();
}

die gleiche Idee wie mit Rechteck, die Sie mit Füllung erreichen können.

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.fill();
}

Probleme mit all diesen Lösungen:

• Es ist schwierig, alle Punkte im Auge zu behalten, die Sie ziehen werden.
• Wenn Sie hineinzoomen, sieht es hässlich aus.

Wenn Sie sich fragen: "Was ist der beste Weg, um einen Punkt zu zeichnen? ", Würde ich mit einem gefüllten Rechteck gehen. Sie können mein jsperf hier mit Vergleichstests sehen .

Was ist mit einem Rechteck? Das muss effizienter sein als das Erstellen eines ImageDataObjekts.

Zeichne ein Rechteck wie sdleihssirhc sagte!

ctx.fillRect (10, 10, 1, 1);

^ - sollte ein 1x1-Rechteck bei x: 10, y: 10 zeichnen

Hmm, Sie können auch einfach eine 1 Pixel breite Linie mit einer Länge von 1 Pixel erstellen und die Richtung entlang einer einzelnen Achse verschieben.

            ctx.beginPath();
            ctx.lineWidth = 1; // one pixel wide
            ctx.strokeStyle = rgba(...);
            ctx.moveTo(50,25); // positioned at 50,25
            ctx.lineTo(51,25); // one pixel long
            ctx.stroke();

Um Phrogz sehr gründliche Antwort zu vervollständigen, gibt es einen kritischen Unterschied zwischen fillRect()und putImageData().
Der erste Einsatzkontext zu ziehen über durch das Hinzufügen eines Rechtecks (nicht um ein Pixel), die unter Verwendung von fillStyle Alpha - Wert und den Kontext globalAlpha und die Transformationsmatrix , Zeile Kappen etc ..
Die zweiten ersetzt eine ganze Reihe von Pixeln (vielleicht ein, aber warum ?)
Das Ergebnis ist anders, wie Sie auf jsperf sehen können .

Niemand möchte jeweils ein Pixel einstellen (dh auf dem Bildschirm zeichnen). Aus diesem Grund gibt es keine spezifische API, um dies zu tun (und das zu Recht).
In Bezug auf die Leistung möchten Sie, wenn das Ziel darin besteht, ein Bild zu generieren (z. B. eine Raytracing-Software), immer ein Array verwenden, das von getImageData()einem optimierten Uint8Array erhalten wird. Dann rufen Sie putImageData()EINMAL oder einige Male pro Sekunde mit an setTimeout/seTInterval.

Schneller HTML-Demo-Code: Basierend auf dem, was ich über die SFML C ++ - Grafikbibliothek weiß:

Speichern Sie diese als HTML-Datei mit UTF-8-Codierung und führen Sie sie aus. Fühlen Sie sich frei zu refaktorieren, ich mag es einfach, japanische Variablen zu verwenden, weil sie präzise sind und nicht viel Platz beanspruchen

In seltenen Fällen möchten Sie EIN beliebiges Pixel einstellen und auf dem Bildschirm anzeigen. Also benutze die

PutPix(x,y, r,g,b,a) 

Verfahren zum Zeichnen zahlreicher beliebiger Pixel in einen Rückpuffer. (billige Anrufe)

Wenn Sie bereit sind zu zeigen, rufen Sie die

Apply() 

Methode zum Anzeigen der Änderungen. (teurer Anruf)

Vollständiger HTML-Dateicode unten:

<!DOCTYPE HTML >
<html lang="en">
<head>
    <title> back-buffer demo </title>
</head>
<body>

</body>

<script>
//Main function to execute once 
//all script is loaded:
function main(){

    //Create a canvas:
    var canvas;
    canvas = attachCanvasToDom();

    //Do the pixel setting test:
    var test_type = FAST_TEST;
    backBufferTest(canvas, test_type);
}

//Constants:
var SLOW_TEST = 1;
var FAST_TEST = 2;


function attachCanvasToDom(){
    //Canvas Creation:
    //cccccccccccccccccccccccccccccccccccccccccc//
    //Create Canvas and append to body:
    var can = document.createElement('canvas');
    document.body.appendChild(can);

    //Make canvas non-zero in size, 
    //so we can see it:
    can.width = 800;
    can.height= 600;

    //Get the context, fill canvas to get visual:
    var ctx = can.getContext("2d");
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(0,0,can.width-1, can.height-1);
    //cccccccccccccccccccccccccccccccccccccccccc//

    //Return the canvas that was created:
    return can;
}

//THIS OBJECT IS SLOOOOOWW!
// 筆 == "pen"
//T筆 == "Type:Pen"
function T筆(canvas){


    //Publicly Exposed Functions
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
    this.PutPix = _putPix;
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//

    if(!canvas){
        throw("[NilCanvasGivenToPenConstruct]");
    }

    var _ctx = canvas.getContext("2d");

    //Pixel Setting Test:
    // only do this once per page
    //絵  =="image"
    //資  =="data"
    //絵資=="image data"
    //筆  =="pen"
    var _絵資 = _ctx.createImageData(1,1); 
    // only do this once per page
    var _筆  = _絵資.data;   


    function _putPix(x,y,  r,g,b,a){
        _筆[0]   = r;
        _筆[1]   = g;
        _筆[2]   = b;
        _筆[3]   = a;
        _ctx.putImageData( _絵資, x, y );  
    }
}

//Back-buffer object, for fast pixel setting:
//尻 =="butt,rear" using to mean "back-buffer"
//T尻=="type: back-buffer"
function T尻(canvas){

    //Publicly Exposed Functions
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
    this.PutPix = _putPix;
    this.Apply  = _apply;
    //PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//

    if(!canvas){
        throw("[NilCanvasGivenToPenConstruct]");
    }

    var _can = canvas;
    var _ctx = canvas.getContext("2d");

    //Pixel Setting Test:
    // only do this once per page
    //絵  =="image"
    //資  =="data"
    //絵資=="image data"
    //筆  =="pen"
    var _w = _can.width;
    var _h = _can.height;
    var _絵資 = _ctx.createImageData(_w,_h); 
    // only do this once per page
    var _筆  = _絵資.data;   


    function _putPix(x,y,  r,g,b,a){

        //Convert XY to index:
        var dex = ( (y*4) *_w) + (x*4);

        _筆[dex+0]   = r;
        _筆[dex+1]   = g;
        _筆[dex+2]   = b;
        _筆[dex+3]   = a;

    }

    function _apply(){
        _ctx.putImageData( _絵資, 0,0 );  
    }

}

function backBufferTest(canvas_input, test_type){
    var can = canvas_input; //shorthand var.

    if(test_type==SLOW_TEST){
        var t筆 = new T筆( can );

        //Iterate over entire canvas, 
        //and set pixels:
        var x0 = 0;
        var x1 = can.width - 1;

        var y0 = 0;
        var y1 = can.height -1;

        for(var x = x0; x <= x1; x++){
        for(var y = y0; y <= y1; y++){
            t筆.PutPix(
                x,y, 
                x%256, y%256,(x+y)%256, 255
            );
        }}//next X/Y

    }else
    if(test_type==FAST_TEST){
        var t尻 = new T尻( can );

        //Iterate over entire canvas, 
        //and set pixels:
        var x0 = 0;
        var x1 = can.width - 1;

        var y0 = 0;
        var y1 = can.height -1;

        for(var x = x0; x <= x1; x++){
        for(var y = y0; y <= y1; y++){
            t尻.PutPix(
                x,y, 
                x%256, y%256,(x+y)%256, 255
            );
        }}//next X/Y

        //When done setting arbitrary pixels,
        //use the apply method to show them 
        //on screen:
        t尻.Apply();

    }
}


main();
</script>
</html>

Wenn Sie über die Geschwindigkeit besorgt sind, können Sie auch WebGL in Betracht ziehen.

HANDY und Vorschlag der Put-Pixel (pp) -Funktion (ES6) ( Lesepixel hier ):

let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()

pp(10,30,0,0,255,255);    // x,y,r,g,b,a ; return canvas object

let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()

// draw shape
for(let i=0; i<800; i++) {
   let a = Math.PI*4*i/800;
   let x=16*Math.sin(a)**3;
   let y=13*Math.cos(a)-5*Math.cos(2*a)-2*Math.cos(3*a)-Math.cos(4*a);   
   pp(100+2.5*x,45-2.5*y,255,0,0,255)   
}

<canvas class="myCanvas" width=200 height=100 style="background: black"></canvas>

Diese Funktion verwendet putImageDataund hat Initialisierungsteil (erste lange Zeile). s='.myCanvas'Verwenden Sie zu Beginn stattdessen Ihren CSS-Selektor für Ihre Leinwand.

Wenn Sie die Parameter auf einen Wert von 0-1 normalisieren möchten, sollten Sie den Standardwert a=255in ändern a=1und mit: id.data.set([r,g,b,a]),ctx.putImageData(id, x, y)bis id.data.set([r*255,g*255,b*255,a*255]),ctx.putImageData(id, x*c.width, y*c.height)

Der obige praktische Code eignet sich gut zum Ad-hoc-Testen von Grafikalgorithmen oder zum Proof of Concept. Er eignet sich jedoch nicht für die Verwendung in der Produktion, in der Code lesbar und klar sein sollte.

putImageDataist wahrscheinlich schneller als fillRectnativ. Ich denke, das liegt daran, dass der fünfte Parameter auf verschiedene Arten zugewiesen werden kann (die Rechteckfarbe), wobei eine Zeichenfolge verwendet wird, die interpretiert werden muss.

Angenommen, Sie tun das:

context.fillRect(x, y, 1, 1, "#fff")
context.fillRect(x, y, 1, 1, "rgba(255, 255, 255, 0.5)")`
context.fillRect(x, y, 1, 1, "rgb(255,255,255)")`
context.fillRect(x, y, 1, 1, "blue")`

Also die Linie

context.fillRect(x, y, 1, 1, "rgba(255, 255, 255, 0.5)")`

ist das schwerste zwischen allen. Das fünfte Argument im fillRectAufruf ist eine etwas längere Zeichenfolge.