Quelle est la meilleure façon de définir un seul pixel dans un canevas HTML5?

Le HTML5 Canvas n'a pas de méthode pour définir explicitement un seul pixel.

Il peut être possible de définir un pixel en utilisant une ligne très courte, mais l'antialisation et les limites de ligne peuvent alors interférer.

Une autre façon pourrait être de créer un petit ImageDataobjet et d'utiliser:

context.putImageData(data, x, y)

pour le mettre en place.

Quelqu'un peut-il décrire une manière efficace et fiable de le faire?

Il y a deux meilleurs prétendants:

1. Créez des données d'image 1 × 1, définissez la couleur et putImageDataà l'emplacement:

   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. Utilisez fillRect()pour dessiner un pixel (il ne devrait y avoir aucun problème d'alias):

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

Vous pouvez tester la vitesse de ceux-ci ici: http://jsperf.com/setting-canvas-pixel/9 ou ici https://www.measurethat.net/Benchmarks/Show/1664/1

Je recommande de tester les navigateurs qui vous intéressent pour une vitesse maximale. Depuis juillet 2017, il fillRect()est 5 à 6 fois plus rapide sur Firefox v54 et Chrome v59 (Win7x64).

D'autres alternatives plus stupides sont:

• utilisation getImageData()/putImageData()sur toute la toile; c'est environ 100 fois plus lent que les autres options.

• création d'une image personnalisée à l'aide d'une URL de données et utilisation drawImage()pour l'afficher:

  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

• créer une autre image ou un autre canevas rempli de tous les pixels que vous souhaitez et utiliser drawImage()pour atténuer uniquement le pixel souhaité. Ce serait probablement très rapide, mais a la limitation dont vous avez besoin pour pré-calculer les pixels dont vous avez besoin.

Notez que mes tests n'essaient pas d'enregistrer et de restaurer le contexte du canevas fillStyle; cela ralentirait les fillRect()performances. Notez également que je ne commence pas avec une ardoise propre ou que je ne teste pas exactement le même ensemble de pixels pour chaque test.

Une méthode qui n'a pas été mentionnée utilise getImageData, puis putImageData.
Cette méthode est idéale lorsque vous souhaitez dessiner beaucoup en une seule fois, rapidement.
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);

Je n'avais pas envisagé fillRect(), mais les réponses m'ont incité à le comparer putImage().

Mettre 100 000 pixels de couleur aléatoire dans des emplacements aléatoires, avec Chrome 9.0.597.84 sur un (ancien) MacBook Pro, prend moins de putImage()100 ms avec , mais près de 900 ms fillRect(). (Code de référence sur http://pastebin.com/4ijVKJcC ).

Si à la place je choisis une seule couleur en dehors des boucles et que je trace simplement cette couleur à des emplacements aléatoires, cela putImage()prend 59 ms contre 102 ms fillRect().

Il semble que la surcharge de génération et d'analyse d'une spécification de couleur CSS dans la rgb(...)syntaxe soit responsable de la plupart de la différence.

En ImageDatarevanche, placer les valeurs RVB brutes directement dans un bloc ne nécessite aucune gestion de chaîne ni analyse.

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;
}

Étant donné que différents navigateurs semblent préférer des méthodes différentes, il serait peut-être judicieux de faire un test plus petit avec les trois méthodes dans le cadre du processus de chargement pour savoir laquelle est la meilleure à utiliser, puis de l'utiliser dans toute l'application?

Cela semble étrange, mais néanmoins HTML5 prend en charge le dessin de lignes, de cercles, de rectangles et de nombreuses autres formes de base, il n'a rien de convenable pour dessiner le point de base. La seule façon de le faire est de simuler le point avec tout ce que vous avez.

Donc, fondamentalement, il y a 3 solutions possibles:

• dessiner un point comme une ligne
• dessiner un point sous forme de polygone
• dessiner un point sous forme de cercle

Chacun d'eux a ses inconvénients

Ligne

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

Gardez à l'esprit que nous nous dirigeons vers le sud-est, et si c'est le bord, il peut y avoir un problème. Mais vous pouvez également dessiner dans n'importe quelle autre direction.

Rectangle

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

ou d'une manière plus rapide en utilisant fillRect car le moteur de rendu ne remplira qu'un pixel.

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

Cercle

L'un des problèmes avec les cercles est qu'il est plus difficile pour un moteur de les rendre

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

la même idée qu'avec le rectangle que vous pouvez réaliser avec un remplissage.

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

Problèmes avec toutes ces solutions:

• il est difficile de garder une trace de tous les points que vous allez tirer.
• quand vous faites un zoom avant, ça a l'air moche.

Si vous vous demandez, "Quelle est la meilleure façon de dessiner un point? ", J'irais avec un rectangle rempli. Vous pouvez voir mon jsperf ici avec des tests de comparaison .

Et un rectangle? Cela doit être plus efficace que de créer un ImageDataobjet.

Dessinez un rectangle comme dit sdleihssirhc!

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

^ - devrait dessiner un rectangle 1x1 à x: 10, y: 10

Hmm, vous pouvez également simplement créer une ligne de 1 pixel de large avec une longueur de 1 pixel et faire bouger sa direction le long d'un seul axe.

            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();

Pour compléter la réponse très approfondie de Phrogz, il y a une différence critique entre fillRect()et putImageData().
La première utilise le contexte pour dessiner sur par l' ajout d' un rectangle (pas un pixel), en utilisant la fillStyle valeur alpha et le contexte globalAlpha et la matrice de transformation , capuchons de ligne , etc ..
Le second remplace un ensemble de jeu de pixels (peut - être un, mais pourquoi ?)
Le résultat est différent comme vous pouvez le voir sur jsperf .

Personne ne veut définir un pixel à la fois (c'est-à-dire le dessiner à l'écran). C'est pourquoi il n'y a pas d'API spécifique pour le faire (et à juste titre).
En termes de performances, si l'objectif est de générer une image (par exemple un logiciel de lancer de rayons), vous souhaitez toujours utiliser un tableau obtenu par getImageData()lequel est un Uint8Array optimisé. Ensuite, vous appelez putImageData()UNE FOIS ou quelques fois par seconde en utilisant setTimeout/seTInterval.

Code de démonstration HTML rapide: basé sur ce que je sais de la bibliothèque graphique SFML C ++:

Enregistrez-le en tant que fichier HTML avec encodage UTF-8 et exécutez-le. N'hésitez pas à refactoriser, j'aime juste utiliser des variables japonaises car elles sont concises et ne prennent pas beaucoup de place

Vous voudrez rarement définir UN pixel arbitraire et l'afficher à l'écran. Alors utilisez le

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

méthode pour dessiner de nombreux pixels arbitraires dans un back-buffer. (appels pas chers)

Ensuite, lorsque vous êtes prêt à montrer, appelez le

Apply() 

méthode pour afficher les modifications. (appel coûteux)

Code de fichier .HTML complet ci-dessous:

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

Si vous êtes préoccupé par la vitesse, vous pouvez également envisager WebGL.

HANDY et proposition de la fonction put pixel (pp) (ES6) (read-pixel ici ):

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>

Cette fonction utilise putImageDataet a une partie d'initialisation (première longue ligne). Au début, s='.myCanvas'utilisez plutôt votre sélecteur CSS pour votre canevas.

Je vous veux pour normaliser les paramètres à la valeur de 0 à 1 , vous devez changer la valeur par défaut a=255pour a=1et avec la ligne: id.data.set([r,g,b,a]),ctx.putImageData(id, x, y)à id.data.set([r*255,g*255,b*255,a*255]),ctx.putImageData(id, x*c.width, y*c.height)

Le code pratique ci-dessus est bon pour tester des algorithmes graphiques ad hoc ou faire une preuve de concept, mais il n'est pas bon à utiliser en production où le code doit être lisible et clair.

putImageDataest probablement plus rapide que fillRectnativement. Je pense que cela parce que le cinquième paramètre peut être attribué de différentes manières (la couleur du rectangle), en utilisant une chaîne qui doit être interprétée.

Supposons que vous fassiez cela:

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")`

Alors, la ligne

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

est le plus lourd de tous. Le cinquième argument de l' fillRectappel est une chaîne un peu plus longue.