Apa cara terbaik untuk menetapkan satu piksel dalam kanvas HTML5?

Kanvas HTML5 tidak memiliki metode untuk secara eksplisit mengatur satu piksel.

Dimungkinkan untuk mengatur piksel menggunakan garis yang sangat pendek, tetapi kemudian antialising dan tutup garis mungkin mengganggu.

Cara lain mungkin untuk membuat ImageDataobjek kecil dan menggunakan:

context.putImageData(data, x, y)

untuk meletakkannya di tempat.

Adakah yang bisa menggambarkan cara yang efisien dan andal dalam melakukan ini?

Ada dua pesaing terbaik:

1. Buat data gambar 1 × 1, atur warnanya, dan putImageDatadi lokasi:

   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. Gunakan fillRect()untuk menggambar piksel (seharusnya tidak ada masalah alias):

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

Anda dapat menguji kecepatannya di sini: http://jsperf.com/setting-canvas-pixel/9 atau di sini https://www.measurethat.net/Benchmarks/Show/1664/1

Saya merekomendasikan pengujian terhadap browser yang Anda pedulikan untuk kecepatan maksimum. Pada Juli 2017, fillRect()5-6 × lebih cepat pada Firefox v54 dan Chrome v59 (Win7x64).

Alternatif lain yang lebih lucu adalah:

• gunakan getImageData()/putImageData()di seluruh kanvas; ini sekitar 100 × lebih lambat dari opsi lain.

• membuat gambar khusus menggunakan url data dan menggunakan drawImage()untuk menampilkannya:

  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

• membuat img atau kanvas lain yang diisi dengan semua piksel yang Anda inginkan dan gunakan drawImage()untuk mencit hanya piksel yang Anda inginkan. Ini mungkin akan sangat cepat, tetapi memiliki batasan yang Anda butuhkan untuk pra-menghitung piksel yang Anda butuhkan.

Perhatikan bahwa pengujian saya tidak mencoba untuk menyimpan dan mengembalikan konteks kanvas fillStyle; ini akan memperlambat fillRect()kinerja. Perhatikan juga bahwa saya tidak memulai dengan yang bersih atau menguji set piksel yang sama persis untuk setiap pengujian.

Salah satu metode yang belum disebutkan adalah menggunakan getImageData dan kemudian putImageData.
Metode ini bagus untuk saat Anda ingin menggambar banyak sekaligus, cepat.
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);

Saya tidak mempertimbangkan fillRect(), tetapi jawabannya mendorong saya untuk membandingkannyaputImage() .

Menempatkan 100.000 piksel berwarna secara acak di lokasi acak, dengan Chrome 9.0.597.84 pada MacBook Pro (lama), membutuhkan waktu kurang dari 100 milidetik putImage(), tetapi hampir 900 milidetik fillRect(). (Kode benchmark di http://pastebin.com/4ijVKJcC ).

Jika sebaliknya saya memilih satu warna di luar loop dan hanya plot warna itu di lokasi acak, putImage()membutuhkan 59ms vs 102ms fillRect().

Tampaknya overhead menghasilkan dan menguraikan spesifikasi warna CSS dalam rgb(...)sintaks bertanggung jawab atas sebagian besar perbedaan.

Meletakkan nilai RGB mentah langsung ke ImageDatablok di sisi lain tidak memerlukan penanganan string atau penguraian.

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

Karena browser yang berbeda tampaknya lebih suka metode yang berbeda, mungkin masuk akal untuk melakukan tes yang lebih kecil dengan ketiga metode sebagai bagian dari proses pemuatan untuk mengetahui mana yang terbaik untuk digunakan dan kemudian menggunakannya di seluruh aplikasi?

Tampaknya aneh, tetapi meskipun demikian HTML5 mendukung menggambar garis, lingkaran, persegi panjang dan banyak bentuk dasar lainnya, itu tidak memiliki apa pun yang cocok untuk menggambar titik dasar. Satu-satunya cara untuk melakukannya adalah dengan mensimulasikan poin dengan apa pun yang Anda miliki.

Jadi pada dasarnya ada 3 solusi yang mungkin:

• gambar titik sebagai garis
• gambar titik sebagai poligon
• gambar titik sebagai lingkaran

Masing-masing dari mereka memiliki kekurangan

Baris

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

Ingatlah bahwa kita sedang menuju ke arah Tenggara, dan jika ini adalah ujungnya, mungkin ada masalah. Tapi Anda juga bisa menggambar ke arah lain.

Empat persegi panjang

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

atau dengan cara yang lebih cepat menggunakan fillRect karena mesin render hanya akan mengisi satu piksel.

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

Lingkaran

Salah satu masalah dengan lingkaran adalah lebih sulit bagi mesin untuk membuat mereka

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

ide yang sama seperti dengan persegi panjang yang bisa Anda capai dengan mengisi.

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

Masalah dengan semua solusi ini:

• sulit untuk melacak semua poin yang akan Anda gambar.
• ketika Anda memperbesar, tampilannya jelek.

Jika Anda bertanya-tanya, "Apa cara terbaik untuk menggambar titik? ", Saya akan pergi dengan persegi panjang penuh. Anda dapat melihat jsperf saya di sini dengan tes perbandingan .

Bagaimana dengan persegi panjang? Itu harus lebih efisien daripada menciptakan ImageDataobjek.

Gambar kotak seperti yang dikatakan sdleihssirhc!

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

^ - harus menggambar kotak 1x1 di x: 10, y: 10

Hmm, Anda juga bisa membuat garis lebar 1 piksel dengan panjang 1 piksel dan membuat arahnya bergerak di sepanjang sumbu tunggal.

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

Untuk melengkapi jawaban Phrogz dengan sangat teliti, ada perbedaan kritis antara fillRect()dan putImageData().
Konteks penggunaan pertama untuk menarik lebih dengan menambahkan sebuah persegi panjang (TIDAK pixel), dengan menggunakan fillStyle nilai alpha DAN konteks globalAlpha dan matriks transformasi , topi garis dll ..
menggantikan kedua seluruh set piksel (mungkin satu, tapi mengapa ?)
Hasilnya berbeda seperti yang Anda lihat di jsperf .

Tidak ada yang ingin mengatur satu piksel pada satu waktu (artinya menggambarnya di layar). Itu sebabnya tidak ada API khusus untuk melakukan itu (dan memang demikian).
Kinerja bijaksana, jika tujuannya adalah untuk menghasilkan gambar (misalnya perangkat lunak ray-tracing), Anda selalu ingin menggunakan array yang diperoleh dengan getImageData()Uint8Array yang dioptimalkan. Kemudian Anda menelepon putImageData()SEKALI atau beberapa kali per detik menggunakan setTimeout/seTInterval.

Kode Demo HTML Cepat: Berdasarkan apa yang saya ketahui tentang perpustakaan grafik SFML C ++:

Simpan ini sebagai file HTML dengan Pengkodean UTF-8 dan jalankan. Merasa bebas untuk refactor, saya hanya suka menggunakan variabel Jepang karena mereka ringkas dan tidak memakan banyak ruang

Jarang Anda ingin mengatur SATU piksel sembarang dan menampilkannya di layar. Jadi gunakan

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

metode untuk menggambar banyak piksel sembarang ke buffer belakang. (panggilan murah)

Kemudian ketika siap untuk ditampilkan, panggil

Apply() 

metode untuk menampilkan perubahan. (panggilan mahal)

Kode file .HTML lengkap di bawah ini:

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

Jika Anda khawatir tentang kecepatan maka Anda juga bisa mempertimbangkan WebGL.

HANDY dan proposisi fungsi put pixel (pp) (ES6) (baca-pixel di sini ):

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>

Fungsi ini menggunakan putImageDatadan memiliki bagian inisialisasi (garis panjang pertama). Pada awalnya alih-alih s='.myCanvas'gunakan pemilih CSS Anda untuk kanvas Anda.

Jika Anda ingin menormalkan parameter menjadi nilai dari 0-1, Anda harus mengubah nilai default a=255menjadi a=1dan sejalan dengan: id.data.set([r,g,b,a]),ctx.putImageData(id, x, y)menjadi id.data.set([r*255,g*255,b*255,a*255]),ctx.putImageData(id, x*c.width, y*c.height)

Kode praktis di atas baik untuk menguji algoritma grafis ad-hoc atau membuat bukti konsep, tetapi tidak baik untuk digunakan dalam produksi di mana kode harus dapat dibaca dan jelas.

putImageData mungkin lebih cepat dari fillRect aslinya. Saya pikir ini karena parameter kelima dapat memiliki cara yang berbeda untuk ditugaskan (warna persegi panjang), menggunakan string yang harus ditafsirkan.

Misalkan Anda melakukan itu:

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

Jadi, garisnya

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

adalah yang paling berat di antara semua. Argumen kelima dalam fillRectpanggilan adalah string yang sedikit lebih panjang.