奇怪的 HTML5 Canvas drawImage 行为

Question

我正在编写一些使用 HTML5 画布的代码。一般来说它运作良好，但现在我发现了一个非常奇怪的行为。奇怪的是它在不同的浏览器上是一致的，所以一定是我理解错了......尽管文档似乎准确地说明了我在做什么。这是代码（它是一个对象方法）：

   MyCanvas.prototype.getElement = function() {

        var innerHtml = "<div></div>";

        var elem = jQuery(innerHtml, {
            'id' : this.viewId
        });



        var canvas = jQuery("<canvas/>", {
            'id' : this.viewId + "canvas",
            'width' : this.width,
            'height' : this.height
        });

        var w = this.width;
        var h = this.height;

        jQuery(elem).append(canvas);

        var imgElem = new Image();

        imgElem.src = this.maskImage;
        imgElem.onload = function() {
            var ctx = canvas[0].getContext('2d');
            ctx.drawImage(this, 0, 0, w, h);

        };

        return elem;
    };

在此之后，我将再次使用 jQuery 将此元素附加到页面中已经存在的 Div（它是空白的）。 结果将是图像被过度拉伸，就像它的宽度的十倍......这很奇怪，因为根据我对 drawImage 的理解，它应该使用 w 和 h 值来缩放图像，并且假设 w 和 h 是画布的大小，应该很合适。

我做错了什么？是不是因为我在渲染的 DOM 树上进行绘制？

Answer 1

我发现这个“功能”也有点令人讨厌。似乎您不想使用 CSS 来设置画布元素的宽度和高度属性。使用属性（而不是 CSS）附加 canvas 元素，并且尺寸应该自行更正。

var canvas = jQuery("<canvas/>", {
    'id' : this.viewId + "canvas"
});

$('#' + this.viewId).attr('height', this.height).attr('width', this.width);