Qual é a melhor maneira de definir um único pixel em uma tela HTML5?

O HTML5 Canvas não tem método para definir explicitamente um único pixel.

Pode ser possível definir um pixel usando uma linha muito curta, mas o antialising e os limites de linha podem interferir.

Outra maneira pode ser criar um ImageDataobjeto pequeno e usar:

context.putImageData(data, x, y)

para colocá-lo no lugar.

Alguém pode descrever uma maneira eficiente e confiável de fazer isso?

Existem dois melhores candidatos:

1. Crie dados de imagem 1 × 1, defina a cor e putImageDatano local:

   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. Use fillRect()para desenhar um pixel (não deve haver problemas de alias):

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

Você pode testar a velocidade destes aqui: http://jsperf.com/setting-canvas-pixel/9 ou aqui https://www.measurethat.net/Benchmarks/Show/1664/1

Eu recomendo testar nos navegadores de que você gosta para obter a velocidade máxima. Em julho de 2017, fillRect()é 5-6 × mais rápido no Firefox v54 e Chrome v59 (Win7x64).

Outras alternativas mais bobas são:

• usando getImageData()/putImageData()em toda a tela; isso é cerca de 100 × mais lento que as outras opções.

• criando uma imagem personalizada usando um URL de dados e usando drawImage()para mostrá-lo:

  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

• criando outro img ou tela preenchida com todos os pixels desejados e usados drawImage()para mesclar apenas o pixel desejado. Provavelmente seria muito rápido, mas tem a limitação de que você precisa pré-calcular os pixels necessários.

Observe que meus testes não tentam salvar e restaurar o contexto da tela fillStyle; isso diminuiria o fillRect()desempenho. Observe também que não estou começando com uma lista limpa ou testando exatamente o mesmo conjunto de pixels para cada teste.

Um método que não foi mencionado é usar getImageData e, em seguida, putImageData.
Este método é bom para quando você deseja desenhar muito de uma só vez, rápido.
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);

Eu não tinha considerado fillRect(), mas as respostas me levaram a compará-lo putImage().

Colocar 100.000 pixels de cores aleatórias em locais aleatórios, com o Chrome 9.0.597.84 em um (antigo) MacBook Pro, leva menos de 100ms putImage(), mas quase 900ms de uso fillRect(). (Código de referência em http://pastebin.com/4ijVKJcC ).

Se, em vez disso, eu escolher uma única cor fora dos loops e apenas traçar essa cor em locais aleatórios, putImage()leva 59ms vs 102ms fillRect().

Parece que a sobrecarga de gerar e analisar uma especificação de cor CSS na rgb(...)sintaxe é responsável pela maior parte da diferença.

Colocar valores RGB brutos diretamente em um ImageDatabloco, por outro lado, não requer manipulação ou análise de string.

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

Como navegadores diferentes parecem preferir métodos diferentes, talvez faça sentido fazer um teste menor com todos os três métodos como parte do processo de carregamento para descobrir qual é o melhor uso e usá-lo em todo o aplicativo?

Parece estranho, mas, mesmo assim, o HTML5 suporta o desenho de linhas, círculos, retângulos e muitas outras formas básicas; ele não possui nada adequado para desenhar o ponto básico. A única maneira de fazer isso é simular o ponto com o que você tiver.

Então, basicamente, existem 3 soluções possíveis:

• desenhar ponto como uma linha
• desenhar ponto como um polígono
• desenhar ponto como um círculo

Cada um deles tem suas desvantagens

Linha

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

Lembre-se de que estamos seguindo na direção sudeste e, se esse for o limite, pode haver um problema. Mas você também pode desenhar em qualquer outra direção.

Retângulo

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

ou de maneira mais rápida usando fillRect, porque o mecanismo de renderização preencherá apenas um pixel.

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

Círculo

Um dos problemas com os círculos é que é mais difícil para um mecanismo processá-los

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

a mesma idéia do retângulo que você pode obter com o preenchimento.

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

Problemas com todas estas soluções:

• é difícil acompanhar todos os pontos que você vai desenhar.
• quando você aumenta o zoom, parece feio.

Se você está se perguntando: "Qual é a melhor maneira de desenhar um ponto? ", Eu usaria um retângulo preenchido. Você pode ver meu jsperf aqui com testes de comparação .

Que tal um retângulo? Isso precisa ser mais eficiente do que criar um ImageDataobjeto.

Desenhe um retângulo como o sdleihssirhc disse!

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

^ - deve desenhar um retângulo 1x1 em x: 10, y: 10

Hmm, você também pode fazer uma linha de 1 pixel de largura com 1 pixel de comprimento e fazer com que a direção se mova ao longo de um único eixo.

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

Para completar a resposta completa do Phrogz, há uma diferença crítica entre fillRect()e putImageData().
O primeiro contexto usos para desenhar sobre por adição de um retângulo (não um pixel), usando o fillStyle valor alfa eo contexto globalAlpha ea matriz de transformação , tampas de linha etc ..
O segundo substitui todo um conjunto de pixels (talvez uma, mas por ?)
O resultado é diferente, como você pode ver no jsperf .

Ninguém deseja definir um pixel de cada vez (ou seja, desenhá-lo na tela). É por isso que não há API específica para fazer isso (e com razão).
Em termos de desempenho, se o objetivo é gerar uma imagem (por exemplo, um software de rastreamento de raios), você sempre deseja usar uma matriz obtida pela getImageData()qual é um Uint8Array otimizado. Então você liga putImageData()UMA VEZ ou algumas vezes por segundo usando setTimeout/seTInterval.

Código de demonstração HTML rápido: Com base no que sei sobre a biblioteca de gráficos SFML C ++:

Salve isso como um arquivo HTML com codificação UTF-8 e execute-o. Sinta-se livre para refatorar, eu apenas gosto de usar variáveis ​​japonesas porque elas são concisas e não ocupam muito espaço

Raramente você deseja definir UM pixel arbitrário e exibi-lo na tela. Então use o

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

método para desenhar vários pixels arbitrários em um buffer de fundo. (chamadas baratas)

Quando estiver pronto para mostrar, ligue para o

Apply() 

método para exibir as alterações. (chamada cara)

Código de arquivo .HTML completo abaixo:

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

Se você está preocupado com a velocidade, também pode considerar o WebGL.

HANDY e proposição da função colocar pixel (pp) (ES6) (ler pixel aqui ):

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>

Esta função usa putImageDatae possui parte de inicialização (primeira linha longa). No início, em vezs='.myCanvas' use o seletor CSS na tela.

Se você deseja normalizar os parâmetros para valores de 0-1, deve alterar o valor padrão a=255para a=1e alinhar com: id.data.set([r,g,b,a]),ctx.putImageData(id, x, y) para id.data.set([r*255,g*255,b*255,a*255]),ctx.putImageData(id, x*c.width, y*c.height)

O código útil acima é bom para algoritmos gráficos de teste ad-hoc ou para fazer prova de conceito, mas não é bom usar na produção em que o código deve ser legível e claro.

putImageData provavelmente é mais rápido que fillRect nativamente. Eu acho que isso porque o quinto parâmetro pode ter maneiras diferentes de serem atribuídas (a cor do retângulo), usando uma string que deve ser interpretada.

Suponha que você esteja fazendo isso:

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

Então a linha

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

é o mais pesado entre todos. O quinto argumento na fillRectchamada é uma string um pouco mais longa.