javascript — анимированный квадрат, подпрыгивающий внутри коробки. Заполнение квадрата с изображением. Работа с [canvas] [img] fillStyle и предотвратить дефолт ()

Анимированные квадратные подпрыгивая внутри коробки. Заполнение квадрата с изображением. Работа с [canvas] [img] fillStyle и предотвратить дефолт ()

Я посмотрел здесь на stackoverflow для решения подобных вопросов. Ссылка ниже — самая близкая, которую я нашел:

Как бы я заполнил Rect с изображением?

Кажется, что по умолчанию цвет «черный» переопределяет мое изображение. Обновляя браузер, я увижу, что мое изображение правильно отображается там, где находится прыгающий квадрат, но только на долю секунды, прежде чем снова включится поведение по умолчанию.

«Cannot read свойство protectDefault of undefined» — это ошибка, которую я обычно получаю при запуске закомментированного кода.

 {amp}lt;body{amp}gt; {amp}lt;canvas width="400" height="400"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;script{amp}gt; var cx = document.querySelector("canvas").getContext("2d"); var img = document.createElement("img"); img.src = "https://upload.wikimedia.org/wikipedia/commons/3/31/Tennis_ball_2.svg"; img.addEventListener("load", function() { // document.body.appendChild(img); cx.drawImage(img, x, y, width, height); // event.preventDefault(); }); var lastTime = null; function frame(time) { if (lastTime != null) updateAnimation(Math.min(100, time - lastTime) / 1000); lastTime = time; requestAnimationFrame(frame); } requestAnimationFrame(frame); var x = 100, y = 60, width = 30, height = 30, speedX = 100, speedY = 60; function updateAnimation(step) { cx.clearRect(0, 0, 400, 400); cx.strokeStyle = "blue"; cx.lineWidth = 4; cx.strokeRect(25, 25, 350, 350); x  = step * speedX; y  = step * speedY; if (x {amp}lt; 25 || x {amp}gt; 375 - width) speedX = -speedX; if (y {amp}lt; 25 || y {amp}gt; 375 - height) speedY = -speedY; cx.fillStyle = img; // function stay(img) { // img.preventDefault(); // } // stay(); cx.beginPath(); cx.rect(x, y, width, height, 0, 7); cx.fill(); } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; 

Спасибо всем, кто пытается мне помочь!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector