Картинка и анимация по Canvas

@targon_kp · Регистрация: 03.09.2021

Студворк — интернет-сервис помощи студентам

Всем привет!
Планирую изменять картинку при клике по кнопке непосредственно в canvas. Код следующий - подгружаю первую картинку. Чтобы менять её, я так понимаю по клику просто подставляю в ctx.src новый адрес картинки? И второй вопрос - как можно сделать какую-нибудь анимацию в canvas при смене картинки (например, изменение opacity с 0 до 1)? И третий вопрос - как вокруг текста сделать рамку?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 
<canvas id="myCanvas" width="300" height="200" ></canvas>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
 let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let img = new Image();
  img.src = "https://99px.ru/sstorage/53/2012/02/tmb_34277_1222.jpg";
  img.onload = function() {
    ctx.drawImage(img, 0, 0, 300, 200 );
    ctx.font = "30px Verdana";
  ctx.fillStyle = "#ffffff";  
  ctx.fillText("Hello", 20, 50);
  };

@voraa · 09.10.2024, 08:39

Сообщение от targon_kp

Чтобы менять её, я так понимаю по клику просто подставляю в ctx.src новый адрес картинки?

У ctx нет свойства src. Что бы поменять картинку ее надо снова рисовать drawImage.

Сообщение от targon_kp

И второй вопрос - как можно сделать какую-нибудь анимацию в canvas при смене картинки (например, изменение opacity с 0 до 1)?

Весь элемент canvas наверно можно как то анимировать. Но отдельную его часть нет. Только путем перерисовки.

Сообщение от targon_kp

И третий вопрос - как вокруг текста сделать рамку?

Нарисовать прямоугольник вокруг текста.

@NTHing · 09.10.2024, 13:47

https://jsfiddle.net/sandeep/PJspQ/1/

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<canvas
        id="myCanvas"
        width="300"
        height="200"
></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
 
const imgSrc = {
    src1: "https://99px.ru/sstorage/53/2012/02/tmb_34277_1222.jpg",
    src2: "https://placehold.co/300x200",
};
 
const textData = {
    fontSize: 30,
    x: 20,
    y: 50,
    padding: 10,
};
 
const img = new Image();
let currentImageSrc = imgSrc.src1;
img.src = currentImageSrc;
 
const drawText = (text) => {
    ctx.font = `${textData.fontSize}px Verdana`;
    ctx.fillStyle = "#ffffff";
    ctx.fillText(text, textData.x, textData.y);
 
    const textWidth = ctx.measureText(text).width;
 
    ctx.strokeStyle = "#ff0000";
    ctx.lineWidth = 3;
    ctx.strokeRect(
        textData.x - textData.padding,
        textData.y - textData.fontSize,
        textWidth + textData.padding * 2,
        textData.fontSize + textData.padding
    );
};
 
const drawImage = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    drawText("Hello");
};
 
img.onload = () => {
    drawImage();
};
 
const fadeOutAndChangeImage = () => {
    let opacity = 1;
    const fadeOutInterval = setInterval(() => {
        ctx.globalAlpha = opacity;
        drawImage();
        opacity -= 0.05;
        if (opacity <= 0) {
            clearInterval(fadeOutInterval);
            changeImage();
            fadeIn();
        }
    }, 50);
};
 
const fadeIn = () => {
    let opacity = 0;
    const fadeInInterval = setInterval(() => {
        ctx.globalAlpha = opacity;
        drawImage();
        opacity += 0.05;
        if (opacity >= 1) {
            clearInterval(fadeInInterval);
        }
    }, 1000 / 60);
};
 
const changeImage = () => {
    currentImageSrc = currentImageSrc === imgSrc.src1 ? imgSrc.src2 : imgSrc.src1;
    img.src = currentImageSrc;
};
 
canvas.onclick = () => {
    fadeOutAndChangeImage();
};
 
</script>

@8Observer8 · 12.10.2024, 15:20

Можно расположить несколько картинок на одной. Пример такой картинки:

У метода drawImage() могут быть следующие параметры:

JavaScript
1
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Они отлично проиллюстрированы в документации:

Название: canvas_drawimage.jpg
Просмотров: 55

Размер: 9.5 Кб

Пример, где по таймеру берётся участок картинки по параметрам (sx, sy, sWidth, sHeight) и рисуется на <canvas> по параметрам: (dx, dy, dWidth, dHeight)

Песочницы:

JavaScript: https://plnkr.co/edit/zjYT0KTfj50MejT9
TypeScript: https://plnkr.co/edit/9frdoArBkyksrT4L

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Running Cat. Canvas API, JavaScript</title>
    <script src="js/main.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas" width="512" height="256"></canvas>
</body>
 
</html>

main.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
window.onload = () =>
{
    const ctx = document.getElementById("renderCanvas").getContext("2d");
 
    let sx = 0, sy = 0, sWidth = 512, sHeight = 256; // Source image
    let dx = 0, dy = 0, dWidth = 512, dHeight = 256; // Destination canvas
    // ctx.drawImage(spriteSheet, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 
    const spriteSheet = new Image();
    spriteSheet.onload = () => { mainLoop(); };
    spriteSheet.src = "assets/running-cat.png";
 
    let currentTime, deltaTime;
    let lastTime = Date.now();
    let animationTime = 0;
    const animationSpeed = 100;
    const frames = [
        { x: 0, y: 0 }, { x: sWidth, y: 0 }, { x: sWidth * 2, y: 0 }, { x: sWidth * 3, y: 0 },
        { x: 0, y: sHeight }, { x: sWidth, y: sHeight }, { x: sWidth * 2, y: sHeight },
        { x: sWidth * 3, y: sHeight }
    ];
 
    let i = 0; // Frame index
 
    function mainLoop()
    {
        currentTime = Date.now();
        deltaTime = currentTime - lastTime;
        lastTime = currentTime;
 
        animationTime += deltaTime;
        if (animationTime >= animationSpeed)
        {
            animationTime = 0;
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.drawImage(spriteSheet, frames[i].x, frames[i].y, sWidth, sHeight, dx, dy, dWidth, dHeight);
            i++;
            if (i >= frames.length) { i = 0; }
        }
        requestAnimationFrame(mainLoop);
    }
};

@targon_kp · 13.10.2024, 01:35 **[ТС]**

Сообщение от 8Observer8

Можно расположить несколько картинок на одной. Пример такой картинки:

В вашем случае - это что-то вроде анимации через animation-timing-function, где указывается количество шагов (step) и таким образом анимируется движение. В моем случае нужно было просто перерисовывать картинку при клике и анимировать ее изменение. Но всё равно спасибо за хороший пример).

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

Картинка и анимация по Canvas

Решение