如何在html5中插入动画,如何将SVG图像添加到javascript html5 canvas动画中？

一种方法是将图像隐藏在HTML中。在这种情况下，图像是作为数据uri的svg并具有id="apple"和，您可以说：

var img = apple;

要在球内绘制图像，您需要使用球的中心，例如：

ctx.drawImage(img, x-img.width/2,y-img.height/2)

另外，setInterval我没有使用requestAnimationFrame，而是在调整大小时图像没有脱离屏幕。希望您会发现我的回答有用。

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var x = canvas.width / 2;

var y = canvas.height / 2;

var rid = null;// request animation id

// SPEED

var dx = 4;

var dy = -4;

var radius = 120;

var img = apple;// the image is the one with the id="apple"

function draw() {

rid = window.requestAnimationFrame(draw);

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();

ctx.arc(x, y, radius, 0, Math.PI * 2);

ctx.fillStyle = "#9370DB";

ctx.fill();

ctx.closePath();

//draw the image in the center of the ball

ctx.drawImage(img, x-img.width/2,y-img.height/2)

if (x + dx > canvas.width - radius) {

dx = -dx;

}

if (x + dx < radius) {

dx = -dx;

}

if (y + dy > canvas.height - radius) {

dy = -dy;

}

if (y + dy < radius) {

dy = -dy;

}

x += dx;

y += dy;

}

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {

//stop the animation

if(rid){window.cancelAnimationFrame(rid); rid= null;}

//get the size of the canvas

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

x = canvas.width / 2;

y = canvas.height / 2;

//restart the animation

draw()

}

window.setTimeout(function() {

resizeCanvas();

window.addEventListener('resize', resizeCanvas, false);

}, 15);