Привет всем, я должен сделать анимацию холста для домашней работы, поэтому я хотел, чтобы скрипт рисовал картинку в середине холста и заставлял ее работать каждые x миллисекунд. Я заставил сценарий нарисовать картинку в центре холста, но я все еще не могу заставить сценарий изменить размер этой картинки для меня. Вот почему я прошу вас о помощи, ниже я размещаю скрипт, который у меня уже есть.
HTML код:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h1 class="text-white display-1 mt-5 mb-5 text-center">Canvas:</h1>
<canvas id="canvas" height="720" width="1280"></canvas>
<script src="script.js"></script>
<audio id="my_audio" src="circles.mp3" loop="loop"></audio>
</body>
Код, написанный в TypeScript:
let mainCanvas = <HTMLCanvasElement> document.getElementById("canvas");
let mainContext = <CanvasRenderingContext2D> mainCanvas.getContext('2d');
let Osu = new Image();
Osu.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Osu%21Logo_%282015%29.png/600px-Osu%21Logo_%282015%29.png";
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function drawCircle() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
// kolorowanie tła
mainContext.fillStyle = `#efefef`;
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
// rysowanie
mainContext.drawImage(Osu, (mainCanvas.width-Osu.width)/2, (mainCanvas.height-Osu.height)/2);
window.requestAnimationFrame(drawCircle);
}
drawCircle();
var myAudio = new Audio('circles.mp3');
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
myAudio.play();
Спасибо за любую помощь.