什么使 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？

What makes a CanvasRenderingContext2D a CanvasRenderingContext2D?

考虑以下网页。

<html>
    <body>
        <canvas id="canvas" width="300" height="300" style="border:1px solid #000000;">
        </canvas>
    </body>
</html>

我在 Firefox 中打开此页面，打开 JS 控制台并键入以下内容。

> document.getElementById("canvas").getContext("2d")

输出结果如下：

CanvasRenderingContext2D { canvas: canvas#canvas, mozCurrentTransform: (6) […], mozCurrentTransformInverse: (6) […], mozTextStyle: "10px sans-serif", mozImageSmoothingEnabled: true, globalAlpha: 1, globalCompositeOperation: "source-over", strokeStyle: "#000000", fillStyle: "#000000", filter: "none" }

另一方面，如果我自己创建一个对象并复制 CanvasRenderingContext2D 的所有内容，它仍然只是一个普通对象。

var realContext = document.getElementById("canvas").getContext("2d")
var myContext = new Object()
for (var property in realContext) {
    myContext[property] = realContext[property];
}

myContext
Object { drawImage: drawImage(), beginPath: beginPath(), fill: fill(), stroke: stroke(), clip: clip(), isPointInPath: isPointInPath(), isPointInStroke: isPointInStroke(), createLinearGradient: createLinearGradient(), createRadialGradient: createRadialGradient(), createPattern: createPattern(), … }

什么使 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？

作为推论，我怎样才能把我的普通旧对象变成一个 CanvasRenderingContext2D?

编辑：我不关心JS控制台说什么。我很在意我不能像使用原始上下文那样使用我的新上下文。

myContext.save()
TypeError: 'save' called on an object that does not implement interface CanvasRenderingContext2D

目标是能够像旧对象一样使用新对象并在原始对象上进行绘制canvas。

编辑： 我一直在寻找 不需要 需要使用 [=46= 修改网站源代码的解决方案].

这是一个片段，它将开始记录对任何 CanvasRenderingContext2D 的所有访问。我禁用了堆栈代码段控制台，因为它会在尝试序列化 console.log() 输出时抛出一些错误，因此只需使用 F12 检查开发人员控制台的输出即可。

function intercept(value) {
  switch (typeof value) {
    case 'function':
    case 'object':
      return new Proxy(value, {
        get(target, key) {
          const value = Reflect.get(target, key);
          console.log('handler.get', target, key, value);
          return intercept(value);
        },
        set(target, key, value) {
          const result = Reflect.set(target, key, value);
          console.log('handler.set', target, key, value);
          return result;
        },
        apply(target, thisArg, args) {
          const value = Reflect.apply(target, thisArg, args);
          console.log('handler.apply', thisArg, target, ...args, value);
          return intercept(value);
        }
      });
    default:
      return value;
  }
}

const ownPropertyDescriptorEntries = Object.entries(
  Object.getOwnPropertyDescriptors(
    CanvasRenderingContext2D.prototype
  )
);
const interceptedPropertyDescriptorEntries = ownPropertyDescriptorEntries.map(
  ([key, { get, set, value, ...descriptor }]) => [
    key, get || set ? {
      ...descriptor,
      get() {
        console.log('descriptor.get', this, key);
        return intercept(Reflect.apply(get, this, []));
      },
      set(value) {
        console.log('descriptor.set', this, key, value);
        return intercept(Reflect.apply(set, this, [value]));
      }
    } : {
      ...descriptor,
      value: intercept(value)
    }
  ]
);

Object.defineProperties(
  CanvasRenderingContext2D.prototype,
  Object.fromEntries(
    interceptedPropertyDescriptorEntries
  )
);

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

console.log(context.lineWidth);
context.fillStyle = 'red';
context.getImageData(0, 0, 100, 100).data[0] = 255;

<canvas></canvas>

descriptor.get CanvasRenderingContext2D lineWidth
1
descriptor.set CanvasRenderingContext2D fillStyle red
handler.apply CanvasRenderingContext2D ƒ getImageData() { [native code] } 0 0 100 100 ImageData
handler.get ImageData data Uint8ClampedArray(40000)
handler.set Uint8ClampedArray(40000) 0 255

参考资料