javascript - 当appendChild(this.context1.canvas1)时出现HierarchyRequestError

Question

我正在尝试为我正在开发的游戏创建一个进度条。但是当我尝试将 Canvas 连接到 div 时，我收到了 HierarchyRequestError 错误。这是代码片段。任何帮助将不胜感激。

this.setSizePercent(horizontalSizePercent, verticalSizePercent);
this.createCanvas();
this.createDOMElement();

return this;

};

//原型(prototype)

COREHTML5.RoundedRectangle.prototype = {

createCanvas: function () {
    var canvas1 = document.createElement('canvas');
    this.context1 = canvas1.getContext('2d');
    return canvas1;
},
createDOMElement: function () {
    this.domElement = document.createElement('div');
    this.domElement.appendChild(this.context1.canvas1);
},
appendTo: function (element) {
    element.appendChild(this.domElement);
    this.domElement.style.width = element.offsetWidth + 'px';
    this.domElement.style.height = element.offsetHeight + 'px';
    this.resize(element.offsetWidth, element.offsetHeight);
},

resize: function (width, height) {
    this.HORIZONTAL_MARGIN = (width - width *
        this.horizontalSizePercent) / 2;
    this.VERTICAL_MARGIN = (height - height *
        this.verticalSizePercent) / 2;
    this.cornerRadius = (this.context1.canvas1.height / 2 -
        2 * this.VERTICAL_MARGIN) / 2;
    this.top = this.VERTICAL_MARGIN;
    this.left = this.HORIZONTAL_MARGIN;
    this.right = this.left + width - 2 * this.HORIZONTAL_MARGIN;
    this.bottom = this.top + height - 2 * this.VERTICAL_MARGIN;

Answer 1

检索 Canvas 元素的 2D Canvas 上下文属性称为 canvas .

因此，您应该使用

this.context1.canvas

而不是

this.context1.canvas1