我编写一些使用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,w,h);
};
return elem;
};
之后，我将再次使用jQuery将这个元素附加到一个已经在页面中的div(这是空白)。
结果将是图像被过度扩展像十倍的宽度….这是奇怪的，因为我理解drawImage，它应该使用w和h值来缩放图像，并给定w和h是尺寸的画布，它应该适合。
我究竟做错了什么？是因为我做绘制的渲染DOM树吗？
