Question

我有一个像素数组，我想将它绘制到画布上，而不使用putImageData，因为该函数会忽略剪辑数据。

所以，为了完成这项工作，我已经将像素数组转换为数据网址，然后将网址添加到图像中，然后我将其绘制到画布上，如下所示：

var ctx = {
    display: document.querySelector('canvas#display').getContext('2d'),
    convert: document.querySelector('canvas#convert').getContext('2d')
}

var image_data = THE_IMAGE_DATA_THAT_I_ALREADY_HAVE;

ctx.convert.putImageData(image_data, 0, 0);

var image_data_URL = ctx.convert.canvas.toDataURL('image/png');
var converter_image = document.querySelector('img#converter-image');

converter_image.onload = function () {
    ctx.display.save();
    ctx.display.beginPath();
    ctx.display.arc(320, 240, 240, 0, Math.PI*2, true);
    ctx.display.clip();
    ctx.display.drawImage(converter_image, 0, 0, 640, 480);
    ctx.display.restore();
}
converter_image.src = image_data_URL;

然而，这是一个非常糟糕的表现，特别是因为我想这样做60 /秒。

必须有另一种方式，对吧？

Answer 1

解决方法是在屏幕外画布上使用getImageData / putImageData绘制像素，然后在画布中绘制屏幕外画布。

更多信息：

Canvas offscreen

Pixel drawing with putImagedata (click on the blank in top of the code to launch it)

使用drawImage在画布上绘制像素数据

1 个答案: