javascript - 尽快升级 Canvas 数据

我有一个画布，并且在更新由putImageData()获取的固定数组中的字节之后，通过getImageData.data方法使用它显示图像。

效果很好，但我需要在Y方向上缩放* 2。

当然，我也可以通过在每行重复两次来做到这一点，而没有任何问题，但是那时渲染一帧需要太多时间（我每秒显示25帧）。我已经了解了使用drawImage()方法缩放图像的功能。据我所知，唯一的问题是使用drawImage()比使用putImageData()慢，这是旧浏览器版本（如Firefox / 2（或类似））所必需的。

如何以两倍快的速度在Y方向上放大图像？

顺便说一句，是否有可能获得类似的解决方案以某种方式获得全屏分辨率（例如Flash-而非JS-例如：进入全屏模式时youtube会做什么）？

最佳答案

如果要缩放整个画布，则可以执行此操作而无需任何额外的JavaScript。只需在CSS中设置一个大小，其大小是画布中指定的宽度和高度的两倍。

<canvas width="200" height="100" style="width:200; height: 200">

请参见W3 spec。

编辑：

看下面由Alnitak链接的问题：如果您想要最近邻缩放而不是抗锯齿，可以这样做：

canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}