javascript - 在自定义元素问题中扩展 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 我正在寻找仅基于铬的浏览器的解决方案。

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