私は、キャンバスを使用して、HTML / JavaScript Canvas APIを使用して、ストロークや塗りつぶされた長方形を多数描画するWebアプリに取り組んでいます。ストロークされた長方形と塗りつぶされた長方形の両方にまったく同じ座標を使用する必要があるため、現在の描画関数（ctx.strokeRectまたはのいずれかctx.fillRect）を変数に割り当てて、後で呼び出します。
残念ながら、CanvasRenderingContext2D関数を保持している変数を使用しようとすると、エラーがスローされます'fillRect' called on an object that does not implement interface CanvasRenderingContext2D。
これは私がやろうとしていることの単純化されたバージョンであり、2番目の長方形の描画中にエラーをスローします。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// draw the top rectangle - works fine
ctx.fillRect(0, 0, 100, 50);
// draw the bottom rectangle - crashes with an error
(f => f(0, 50, 100, 50))(ctx.fillRect);<canvas id="canvas" width="100" height="100"></canvas>メソッドが次のような変数に割り当てられている場合も、エラーがスローされます。
const fn = ctx.fillRect;
fn(0, 0, 50, 50);
キャンバスコンテキスト関数をこのように使用できないのはなぜですか？または、このように使用できますか？コードに間違いがありませんか？
これらのメソッドはCanvasRenderingContext2Dプロトタイプから継承されており、そのようなコンテキストのすべてのインスタンスでまったく同じ関数であるためです。
const canvas1 = document.createElement("canvas");
const canvas2 = document.createElement("canvas");
const ctx1 = canvas1.getContext("2d");
const ctx2 = canvas2.getContext("2d");
const fn1 = ctx1.fillRect;
const fn2 = ctx2.fillRect;
console.log( "fn1 === fn2:", fn1 === fn2 );
console.log( "fn1 === proto.fillRect:", fn1 === CanvasRenderingContext2D.prototype.fillRect );必要なのは、コンテキストの特定のインスタンスにバインドされたこの関数のコピーを作成することです。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// draw the top rectangle - works fine
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = "green";
(f => f(0, 50, 100, 50))(ctx.fillRect.bind(ctx));<canvas id="canvas" width="100" height="100"></canvas>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加