在HTML5画布中设置单个像素的最佳方法是什么?

HTML5 Canvas没有显式设置单个像素的方法。

可以使用非常短的行设置像素，但反字符和行大写可能会干扰。

另一种方法可能是创建一个小的ImageData对象，并使用:

context.putImageData(data, x, y)

把它放在合适的位置。

有人能描述一种高效可靠的方法吗?

当前回答

有两个最好的竞争者:

创建一个1×1图像数据，设置颜色，putImageData在位置: var id = myContext.createImageData(1,1);//每页只做一次 Var d = id.data;//每页只做一次 D [0] = r; D [1] = g; D [2] = b; D [3] = a; myContext。putImageData(id, x, y); 使用fillRect()绘制一个像素(应该没有混叠问题): ctx。fillStyle = " rgba(“+ r +”、“+ g +”、“+ b + +(一个/ 255)+)”; ctx。fillRect(x, y, 1,1);

你可以在这里测试它们的速度:http://jsperf.com/setting-canvas-pixel/9或https://www.measurethat.net/Benchmarks/Show/1664/1

我建议针对您关心的浏览器进行测试，以获得最大速度。截至2017年7月，fillRect()在Firefox v54和Chrome v59 (Win7x64)上快了5-6倍。

其他更愚蠢的选择有:

using getImageData()/putImageData() on the entire canvas; this is about 100× slower than other options. creating a custom image using a data url and using drawImage() to show it: 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 creating another img or canvas filled with all the pixels you want and use drawImage() to blit just the pixel you want across. This would probably be very fast, but has the limitation that you need to pre-calculate the pixels you need.

注意，我的测试没有尝试保存和恢复画布上下文fillStyle;这将降低fillRect()的性能。还要注意，我并没有从头开始，也没有为每个测试测试完全相同的像素集。

2011-02-04 16:57:09

其他回答

长方形呢?这比创建ImageData对象更有效。

2011-02-04 16:35:37

像sdleihssirhc说的那样画一个矩形!

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

^——应该在x:10, y:10处画一个1x1的矩形

2011-02-04 16:45:07

一种没有提到的方法是使用getImageData，然后使用putImageData。这种方法很适合当你想要画很多的时候，快速。 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);

2018-07-08 10:33:58

快速HTML演示代码: 基于我对SFML c++图形库的了解:

将其保存为UTF-8编码的HTML文件并运行。可以随意重构，我只是喜欢用日文变量，因为它们简洁明了，不占太多空间

你很少会想要设置一个任意像素和显示它在屏幕上。所以使用

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

方法将大量任意像素绘制到后缓冲区。(便宜的调用)

当准备好展示的时候，打电话给

Apply()

方法显示更改。(昂贵的)

完整的。html文件代码如下:

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

2017-06-05 21:51:05

这看起来很奇怪，但是HTML5支持画线、圆、矩形和许多其他基本形状，它没有任何适合画基本点的东西。唯一的方法就是用你有的东西来模拟点。

所以基本上有三种可能的解决方案:

画一个点作为一条线画一个多边形画一个圆

每一种都有其缺点

Line

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

请记住，我们正在画东南方向，如果这是边缘，可能会有问题。但你也可以往其他方向画。

矩形

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

或者以更快的方式使用fillRect，因为渲染引擎只会填充一个像素。

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

圆

圆形的一个问题是，引擎很难渲染它们

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

与矩形相同的想法，你可以实现与填充。

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

所有这些解决方案都存在问题:

要记住你要画的所有点是很困难的。当你放大的时候，它看起来很丑。

如果你想知道，“画一个点的最好方法是什么?”，我会选择填充矩形。您可以在这里看到带有比较测试的jsperf。

2015-10-08 20:04:06

在HTML5画布中设置单个像素的最佳方法是什么?

推荐文章

最新文章

标签