奇怪的 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 来设置 canvas 元素的宽度和高度属性。向 canvas 元素附加属性（而不是 CSS），并且尺寸应该自行更正。

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

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