是什么让 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？答案

【问题标题】：What makes a CanvasRenderingContext2D a CanvasRenderingContext2D?是什么让 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？
【发布时间】：2018-09-12 21:06:16
【问题描述】：

考虑以下网页。

<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

目标是能够像使用旧对象一样使用新对象并在原始画布上绘图。

编辑：我已经寻找了不需要需要使用画布修改网站源代码的解决方案。

【问题讨论】：

标签： javascript html5-canvas metaprogramming javascript-objects

【解决方案1】：

这是一个 sn-p，它将开始记录对任何 CanvasRenderingContext2D 的所有访问。我禁用了堆栈 sn-p 控制台，因为它在尝试序列化 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;

&lt;canvas&gt;&lt;/canvas&gt;

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

参考文献

【讨论】：

我最初在一个简单的示例上对此进行了测试，但是当我在稍微多一点的complex example 上尝试它时，似乎这会导致画布呈现黑屏。关于为什么会这样的任何想法？
@merlin2011 实际上我放慢了requestAnimationFrame 的速度，但它仍然没有渲染任何东西。我会仔细看看。
@merlin2011 这似乎很可能是因为fillStyle 被设置为Proxy 而不是真正的CanvasGradient
有没有办法更改代理，以便将属性设置为真实对象，但仅在设置时记录？
@merlin2011 可能...这样做会涉及检查对象是否为Proxy，这需要元元编程。