奇怪的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行爲

回答

相關問題