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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

可能可以使用很短的线设置像素，但是抗锯齿和线帽可能会干扰。

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

context.putImageData(data, x, y)

放置到位。

谁能描述一种有效且可靠的方法？

回答：

有两个最佳竞争者：

  1. 创建1×1图像数据，设置颜色，并putImageData在以下位置：

    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. 使用fillRect()绘制像素（应该没有走样的问题）：

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

    ctx.fillRect( x, y, 1, 1 );

截至2017年7月，fillRect()在Firefox v54和Chrome

v59（Win7x64）上速度提高了5-6倍。

其他更明智的选择是：

  • 使用getImageData()/putImageData()整个画布上; 这比其他选项要慢100倍。

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

    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

  • 创建另一个img或画布，其中填充了您想要的所有像素，并用于drawImage()仅涂抹您想要的像素。这可能非常快，但是有一个局限性，就是您需要预先计算所需的像素。

请注意，我的测试并不尝试保存和恢复canvas上下文fillStyle；这会降低fillRect()性能。另请注意，我不是从一开始就做任何准备，也不是每次测试都测试完全相同的像素集。

以上是 在HTML5画布中设置单个像素的最佳方法是什么？ 的全部内容， 来源链接： utcz.com/qa/403798.html

回到顶部