0

ピクセル配列があり、putImageDataを使用せずにキャンバスに描画したいのですが、その関数はクリップデータを無視するためです。

したがって、これを機能させるために、ピクセル配列をデータURLに変換し、そのURLを画像に追加して、次のようにキャンバスに描画しました。

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 /秒で実行したいので、非常に悪いパフォーマンスになります。

別の方法があるはずですよね？

4

1 に答える 1

2

回避策は、オフスクリーン キャンバスで getImageData / putImageData を使用してピクセルを描画し、オフスクリーン キャンバスをキャンバスに描画することです。

詳細情報:

キャンバス オフスクリーン

putImagedata を使用したピクセル描画 (コードの上部にある空白をクリックして起動します)

于 2012-10-01T15:19:20.077 に答える