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

我试图做一个简单的游戏，但是如果我需要一个弹跳球的图像，那么我该怎么做呢？ 我正在这样做-

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

现在画布是空白的

这里是小提琴链接-

我想添加的图像，而不是这个简单的球-

---

这是一个脚本的工作版本，它使用图像而不是

arc

。您可能希望使用Javascript的

new Image（）

加载img，然后将源代码设置为所需的图像。然后使用

drawImage

而不是

arc

---

现在检查小提琴，球有图像，但它固定在一个角度。我要球从各个角度移动。如何做到这一点？旋转图像需要单独的代码才能完成。有关如何在画布上旋转图像的示例，请参阅。