无法使用带有变量赋值的 CanvasRenderingContext2D 方法

Question

我正在开发一个网络应用程序，它使用 canvas 使用 HTML/JavaScript Canvas API 绘制大量描边 and/or 填充矩形。由于我必须对描边矩形和填充矩形使用完全相同的坐标，因此我想将当前绘图函数（ctx.strokeRect 或 ctx.fillRect）分配给一个变量并稍后调用它。

不幸的是，尝试使用包含 CanvasRenderingContext2D 函数的变量会引发错误：'fillRect' called on an object that does not implement interface CanvasRenderingContext2D.

这是我正在尝试执行的操作的简化版本，在绘制第二个矩形时会引发错误：

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);

为什么 canvas 上下文函数不能这样使用？或者它们可以这样使用吗，我是否遗漏了代码中的错误？

Answer 1

因为这些方法继承自 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 );

您想要的是创建此函数的副本 bound 到您的特定上下文实例：

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>

无法使用带有变量赋值的 CanvasRenderingContext2D 方法

Unable to Use CanvasRenderingContext2D Methods with Variable Assignment

javascript

closures

canvas

callback

html5-canvas