如何将 SVG 图像添加到 javascript html5 画布动画？答案

【问题标题】：How to add SVG image to javascript html5 canvas animation?如何将 SVG 图像添加到 javascript html5 画布动画？
【发布时间】：2019-09-28 22:29:20
【问题描述】：

我目前在 html5 画布中有一个旋转的弹跳球，我希望在球内插入一个 SVG 图像，该图像会随之移动和旋转我有这段代码来自研究，但不确定这是否正确

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "";

有人对我如何实现这一目标有任何建议吗？这是我的代码

<canvas id="myCanvas"></canvas>


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
// SPEED
var dx = 4;
var dy = -4;

var radius = 120;

function 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();

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() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

resizeCanvas();

x = canvas.width / 2;
y = canvas.height / 2;

setInterval(draw, 10);

【问题讨论】：

是的，它是正确的...除了您希望在 Image 的 onload 触发后启动整个动画，并且您希望在动画代码中包含 drawImage。

标签： javascript image svg html5-canvas

【解决方案1】：

var img = new Image();
img.src = ""; // Put the path to you SVG image here.
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

这应该可行

【讨论】：

【解决方案2】：

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

var img = apple;

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

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

另外，我使用的是requestAnimationFrame，而不是使用setInterval，并且图像在调整大小时不会超出屏幕。希望我的回答对您有用。

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

<canvas id="myCanvas">
  <img id="apple" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' width='106px' height='122px' viewBox='41 54 106 122'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke-width='2' stroke-miterlimit='10' d='M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke-width='2' stroke-miterlimit='10' d='M118.575,54.609c0,0,0.9,5.625-1.35,10.349 s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z'/%3E%3C/g%3E%3C/svg%3E" />
</canvas>

请在整页上运行代码。

【讨论】：