如何添加圖像到這個帆布球？

我想做一個簡單的遊戲，但如果我需要一個圖像爲我的彈跳球，那麼我該怎麼做？我做這個 -如何添加圖像到這個帆布球？

function draw() { 
    ctx.clearRect(0, 0, 300, 300); 
    if (ctx.getContext) { 

      Snooker = new Image(); 
      Snooker.onload = loadingComplete; 
      Snooker.src = "http://www.wpclipart.com/toys/balls/red_snooker_ball.png"; 
     } 
    x += dx; 
    y += dy; 
    bounce(); 
}

和 - >

function init() { 
    var ctx = document.getElementById("canvas"); 

    return setInterval(draw, 10); 
}

現在畫布是空白。

這裏是小提琴鏈路 http://jsfiddle.net/stackmanoz/QcLTw/1/

圖片我想補充的，而不是這種簡單的球 - http://www.wpclipart.com/toys/balls/red_snooker_ball.png

來源

2013-01-24 Manoj

這裏是你的腳本的工作版本使用圖像而不是arc的。您需要使用Javascript的new Image()加載img，然後將源設置爲您想要的圖像。然後使用drawImage而不是arc。

http://jsfiddle.net/QcLTw/7/

來源

2013-01-24 07:49:36

檢查小提琴現在，球有形象，但它是固定的角度。我想要球從各個角度移動。你怎麼能這樣做？ – Manoj

旋轉圖像將需要單獨的代碼來完成。您可以參考[這裏]（http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/），瞭解如何在畫布上旋轉圖像的示例。 –

如何添加圖像到這個帆布球？

回答

相關問題