javascript - 如何将图像添加到此画布球？

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 加载 img new Image()，然后将源设置为您想要的图像。然后使用drawImage而不是arc.

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