给定一个 40x30 的颜色数组，在 400x300 画布的屏幕上显示它们的最快方法是什么？也就是说，每种颜色在画布元素中都需要 100 个像素。
在 HTML5 中使用 canvas 元素我创建了 4 种可能的方法来做到这一点。http://jsperf.com/pixel-plotting
随机像素数据加载到 40x30 数组中。然后将其显示在大小为 400x300 的画布中，以便每个逻辑像素在屏幕上由 100 个像素表示。
最快的方法（使用 Chrome 38.0）是在隐藏的画布中创建图像数据，并使用 toDataURL 将其复制到屏幕上显示的画布中。属性 imageSmoothingEnabled 设置为 false 以在向上缩放时停止像素模糊。
有没有其他方法可以做到这一点？我尝试使用较小的画布尺寸并在 CSS 中将其放大，但这导致像素模糊。
我想知道测试在其他网络浏览器中的表现如何；尤其是手机的。
将像素数据绘制到屏幕上非常重要，因为它需要每秒发生至少 30 次，因此即使是一个小的调整也可以大大提高效率。
这是我测试的四种方式的代码。
方法一
var png = document.createElement("img");
var c2 = document.getElementById("myCanvas");
var ctx2 = c2.getContext("2d");
var c1 = document.createElement("canvas");
c1.width = 40;
c1.height = 30;
var ctx1 = c1.getContext("2d");
var imgData = ctx1.createImageData(40, 30);
for (var i=0; i<imgData.data.length; i+=4) {
var x = …