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

Question

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

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

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

P.S。我正在寻找仅基于铬的浏览器的解决方案。

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

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

Extending HTMLCanvasElement in Custom Element issue

javascript

canvas

chromium

custom-element