奇怪的HTML5画布drawImage行为

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

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树？

来源

2010-07-06 gotch4

你能发布所有的javascript和html吗？ – Castrohenge 2010-07-08 11:32:12

我发现这个“功能”，以及有点讨厌。看起来好像您不想使用CSS设置canvas元素的宽度和高度属性。附加canvas元素的属性（而不是CSS），尺寸应该自行更正。

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

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

来源

2010-11-18 20:38:56

这解决了我的问题，谢谢。 – mindeavor 2011-07-28 07:39:15

+12

画布的宽度和高度由元素属性定义是非常重要的。这些尺寸决定画布的光栅表面中有多少像素; CSS宽度和高度描述了画布在页面中的大小。 – ellisbben 2012-02-01 18:48:23

这让我非常难过，因为即使画布的大小恰好在浏览器中，我所做的事情都没有发生。谢谢！ – 2012-08-17 01:41:47

奇怪的HTML5画布drawImage行为

回答

相关问题