如何添加图像到这个帆布球？

Question

我想做一个简单的游戏，但如果我需要一个图像为我的弹跳球，那么我该怎么做？ 我做这个 -

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

Answer 1

这里是你的脚本的工作版本使用图像而不是arc的。您需要使用Javascript的new Image()加载img，然后将源设置为您想要的图像。然后使用drawImage而不是arc。

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