在自定义元素问题中扩展 HTMLCanvasElement

Question

我无法获取自定义画布元素的绘图上下文。

var customCanvas      = Object.create(HTMLCanvasElement.prototype),
    canvasConstructor = document.registerElement("custom-canvas", { prototype: customCanvas }),
    canvas            = document.createElement("custom-canvas"),
    ctx               = canvas.getContext("2d"); // Uncaught TypeError: Illegal invocation

是错误、遗漏还是其他原因？

PS 我正在寻找仅基于 chromium 的浏览器的解决方案。

Answer 1

您在这里遗漏了一些要点，在扩展本机对象时，您必须使用以下extends选项：

canvasConstructor = document.registerElement("custom-canvas", { prototype: customCanvas, extends: 'canvas' });

而且您无法custom type extensions直接创建，因此您不能这样做，createElement("custom-canvas")您必须使用该is属性，并且为此您必须使用createElement带有两个参数的：

canvas = document.createElement('canvas', 'custom-canvas');
//canvas in HTML will be <canvas is="custom-canvas"></canvas>
//<custom-canvas></custom-canvas> is invalid

完成所有这些操作后，您将能够使用您的类型扩展：

ctx = canvas.getContext('2d'); //no error :)