画布阴影DOM和Web组件

Question

我试图利用Web组件，模板和影子DOM创建画布元素。 问题是我无法在原型内部获得顶点，或者在创建阴影时出现此错误：HierarchyRequestError：无法在“元素”上执行“ createShadowRoot”：为此元素禁用了作者创建的阴影根。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">


<link rel="import" href="mycanvas.html">

</head>

<body>

<canvas is="my-canvas"></canvas>






</body>
</html>


<template id="mytemplate">
<style>
p {color:green;}
span {text-decoration: underline;}
canvas {background-color: #f00;
         width:300px;}
</style>

</template>
<script>

(function() {



     var myPrototype= Object.create(HTMLElement.prototype);
     var myDocument=document.currentScript.ownerDocument; 




     myPrototype.createdCallback=function() {
                                var shadow= this.createShadowRoot(); 
                                var template=myDocument.querySelector("#mytemplate");
                                var clone= document.importNode(template.content, true);

                                shadow.appendChild(clone);





                                            } //end prototype




     var myCanvas= document.registerElement('my-canvas', {

      prototype: myPrototype,
      extends:'canvas'

     });    
}());
</script>

Answer 1

不管我如何尝试获取html canvas元素（使用getElementsByTagName或其他），它都说getContext不是一个函数

定义myPrototype时，尝试用HTMLCanvasElement.prototype替换HTMLElement.prototype

画布阴影DOM和Web组件

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-14 14:05:48

画布阴影DOM和Web组件

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-14 14:05:48

解决方案1
0 已采纳 2016-06-14 14:05:48