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

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);
}

现在 Canvas 是空白的。

这是 fiddle 链接- 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/