javascript - 如何向该 Canvas 球添加图像？

我试图做一个简单的游戏，但如果我需要一个图像，我的弹跳球，然后我怎么做？
我在做这个-

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

最佳答案

下面是使用图像而不是arc的脚本的工作版本。您需要使用Javascript的new Image()加载img，然后将源设置为所需的图像。然后使用drawImage而不是arc。
http://jsfiddle.net/QcLTw/7/