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

【问题标题】：Extending HTMLCanvasElement in Custom Element issue在自定义元素问题中扩展 HTMLCanvasElement
【发布时间】：2015-03-11 11:27:41
【问题描述】：

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

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

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

附：我正在寻找仅基于铬的浏览器的解决方案。

【问题讨论】：

我将您的 var 语句拆分为多个 var；这样做，我得到（对于 canvasContructor）， typeError: document.registerElement is not a function。做一个快速的谷歌建议您可能需要先加载一些其他库（或者您可能应该提及您正在使用的内容，但我非常感谢您发布了看起来像是查找错误所需的最低代码）。 [参见github.com/Polymer/vulcanize/issues/110，然后引用webcomponents.org/polyfills/]。我使用的是 Firefox.closetolastest；您可能还想指定您使用的浏览器。
谢谢。我已经指定了浏览器。
好的...您在使用 Chrome 时遇到了同样的错误。尝试创建 webgl 上下文也失败了（在同一个控制台中，创建一个真实的画布并执行 realcanvas.getContext("2d") 工作，这有望排除例如 2d 上下文是否被禁用的问题）对于一些可能与安全相关的问题）
你试过将它添加到 dom 树中吗？
是的，我尝试了很多变种，但都不起作用。

标签： javascript canvas chromium custom-element

【解决方案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 一起使用？ HTMLDivElement 允许创建一个纯自定义元素，例如 .
如果你想使用原生的getContext 函数，而不必在你的自定义对象原型中重新实现，你必须这样做。你不能扩展一个原生对象并使用你的自定义标签，或者你使用原始标签和isattribute，或者你创建一个新组件，它有一个子画布，并在你的原型中提供必要的功能。跨度>
如何重新实现原生的getContext？编辑 V8 C++ 源代码？
不是那样，通过重新实现我的意思是向您的组件影子 dom 添加一个画布，然后在您的自定义组件原型中创建一个 getContext 函数，您可以在其中调用您的子画布 getContext 和返回结果
同样，为什么我不能创建一个具有完整功能的纯自定义画布元素？是不是 Blink Web 引擎开发者的特殊想法？