2013-07-13 124 views
1

嗨,我有一個簡單的問題,我可以'似乎找到答案在谷歌。我試圖在畫布上繪製圖像。我最初使用了「新」構造函數(ballPic = new Image(); ballPic.src =「ball.png」),它在我的畫布上繪製時起作用,但我需要做一些縮放並且不確定是否可以附着一個CSS對象的ID。所以我反而試圖使用圖片標籤,並在CSS中完成其餘部分。html圖像ID和畫布

但是使用變量的方式doenst似乎與我的畫布繪製工作:

ballPic = '<img id="soccerBall">'; 
var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      ctx.drawImage(BallPic, -25, -25); 

這是因爲分配像ballPic變量=不一樣的是部件本身使用構造時喜歡?除了將它附加到文檔並使用getElementbyID之外,我將如何傳遞它?

回答

1

您可以繼續使用Image構造函數並仍然縮放圖像。還有的drawImage功能的另一種方法重載:

From MDN

的的drawImage()方法的第二個變種是增加了兩個新的參數,讓我們在畫布上放置縮放圖像。

drawImage(image, x, y, width, height)

這增加了的寬度和高度參數,其指示的大小,其是按比例的圖像繪製到畫布時它。

我建議你檢查出該網頁,它有很多很好的信息,像

  • 使用data:網址
  • 處理圖像加載
  • 加載還是從視頻幀
  • 切片
  • 示例gall 012
0

創建一個圖像,處理onload事件,其中您將畫布大小更新爲圖像的縮放大小,然後使用比例繪製圖像。

var scale = 2   ; 
var ballPic = new Image(); 

ballPic.onload = function drawImage() { 
    var c=document.getElementById("myCanvas"); 
    c.width = ballPic.width * scale ; 
    c.height = ballPic.height * scale ; 
    var ctx=c.getContext("2d"); 
    ctx.scale(scale, scale) ; 
    ctx.drawImage(ballPic, 0, 0); 
}; 

ballPic.src = 
    'http://melinabeachturtlehatchery.files.wordpress.com/2010/07/turtle4.jpg'; 

小提琴是在這裏:

http://jsbin.com/etemox/1/edit

+0

我認爲這是我第一次看到一個非匿名函數不能直接用於在事件調用矢量:) :) – K3N

+0

我經常名稱函數的目的是爲了清晰,調試和性能或內存分析...它有時非常有用。 – GameAlchemist