Как добавить изображение SVG в анимацию холста javascript html5? - PullRequest
Новая
       26

Как добавить изображение SVG в анимацию холста javascript html5?

1 голос
/ 11 мая 2019

В настоящее время у меня есть вращающийся прыгающий шар на холсте 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);

Ответы [ 2 ]

0 голосов
/ 12 мая 2019

Один из способов сделать это - поместить изображение в HTML. В этом случае изображение является svg как data uri и имеет 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);
<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>

Пожалуйста, запустите код на полной странице.

0 голосов
/ 11 мая 2019 
var img = new Image();
img.src = ""; // Put the path to you SVG image here.
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

Это должно работать

...