在HTML5画布中设置单个像素的最佳方法是什么？ [英] What's the best way to set a single pixel in an HTML5 canvas?

问题描述

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

可以使用非常短的行来设置像素，

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

  context.putImageData（data，x，y）
  

$ b $

任何人都可以描述一种高效可靠的方法来实现这个目的？

解决方案

有两个最佳竞争者：

1. 创建1x1图像数据，设置颜色， 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）; 
     




2. 使用 fillRect（）绘制像素（应该没有别名问题）：

     ctx.fillStyle =rgba（+ r +，+ g +，+ b +，+（a / 255）+） 
    ctx.fillRect（x，y，1，1）; 
     

您可以在这里测试速度： http://jsperf.com/setting-canvas-pixel

在Chrome上，1x1图像数据是比使用 fillRect 快10倍（！）。

在Firefox 3.6上，1x1只有1.3倍的快。

在Firefox 4.0b上，1x1大约是80x（!!）慢比 fillRect 。

只有在启用硬件加速时才会发生，并且可能已修复。

$

/ p>

• 在整个画布上使用 getImageData（）/ putImageData（）




• 使用数据网址并使用 drawImage创建自定义图片（）显示它：

    var img = new Image; 
   img.src =data：image / png; base64，+ myPNGEncoder（r，g，b，a）; 
   //写PNGEncoder留给读者做练习
    




• 创建另一个img或画布填充所有您想要的像素，并使用 drawImage（） blit只是你想要的像素。这可能会非常快，但有一个限制，你需要预先计算所需的像素。

注意，我的测试不会尝试保存和恢复canvas上下文fillStyle;这将进一步减慢 fillRect 性能。另外请注意（由于测试框架的限制），我不是从一个干净的slate开始，或测试每个测试完全相同的像素集。

The HTML5 Canvas has no method for explicitly setting a single pixel.

It might be possible to set a pixel using a very short line, but then antialising and line caps might interfere.

Another way might be to create a small ImageData object and using:

context.putImageData(data, x, y)

to put it in place.

Can anyone describe an efficient and reliable way of doing this?

解决方案

There are two best contenders:

1. Create a 1x1 image data, set the color, and putImageData at the location:

   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() to draw a pixel (there should be no aliasing issues):

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

You can test the speed of these here: http://jsperf.com/setting-canvas-pixel
On Chrome the 1x1 image data is about 10x(!) as fast as using fillRect.
On Firefox 3.6 the 1x1 is only about 1.3x faster.
On Firefox 4.0b the 1x1 is about 80x(!!) slower than fillRect.
This slowdown only occurs when hardware acceleration is enabled, and may be fixed.

I recommend using the 1x1 image data for maximum speed.

Other, sillier alternatives are:

• using getImageData()/putImageData() on the entire canvas; as shown in the tests, this is about 100x 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.

Note that my tests do not attempt to save and restore the canvas context fillStyle; this would further slow down the fillRect performance. Also note that (due to limitations in the testing framework) I am not starting with a clean slate or testing the exact same set of pixels for each test.

这篇关于在HTML5画布中设置单个像素的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！