ImageData最近、データ配列を使用してキャンバス全体にグラデーションを引き伸ばしました。つまり、メソッドctx.getImageData()とctx.putImageData()メソッドであり、「これは、動くオブジェクトでいっぱいのキャンバスをアニメートする非常に効率的な方法である可能性がある」と考えました。そのため、ステートメントと一緒にメイン関数にラップしましたrequestAnimationFrame(callback)が、それが奇妙なことです。説明で私ができる最善のことは、キャンバスのピクセルの最も左の列がピクセルの最も右の列に複製されているようなものであり、getおよびput ctxメソッドに指定した座標に基づいて、これは奇妙な結果をもたらす可能性があると言うことです.
0, 0私は次のようにキャンバスを対象とする get メソッドと put メソッドから始めました。
imageData = ctx.getImageData( 0, 0, cvs.width, cvs.height );
// here I set the pixel colors according to their location
// on the canvas using nested for loops to target the
// the correct imageData array indexes.
ctx.putImageData( imageData, 0, 0 );
しかし、キャンバスの右側が間違っていることにすぐに気付きました。グラデーションが最初からやり直し、最後のピクセルが何らかの理由で触れられなかったように:
そのため、描画領域を縮小してputImageData 座標を変更し、描画された画像とキャンバスの端の間にスペースを確保し、get座標を変更して、キャンバスの右端にあるその線を削除しました。
imageData = ctx.getImageData( 1, 1, cvs.width, cvs.height );
for ( var x = 0; x < cvs.width - 92; x++ ) {
for ( var y = 0; y < cvs.height - 92; y++ ) {
// array[ x + y * width ] = value / x; // or similar
}
}
ctx.putImageData( imageData, 2, 2 );
かわいい！しかし、間違っている...ので、codepenで再現しました。誰かがこの行動を理解し、克服するのを手伝ってくれますか?
注: codepen には縮小された描画領域があります。座標を 0に変更するgetと、基本的に最初の例と同じように動作することがわかりますが、予想される正方形と予想外の線の間に空白があります。とは言っても、最も興味深い動作のためにgetat 1 とat 0 のままにしました。put