Примеры кода для реализации обычной анимации и анимации частиц в холсте

Холст используется для рисования изображений и анимации на веб-страницах. Его можно понимать как холст, и на этом холсте создается желаемый эффект.

Canvas может рисовать динамические эффекты. Помимо часто используемых обычных анимаций, концепция частиц также может использоваться для достижения более сложных динамических эффектов. В этой статье для реализации простых часов используются обычные динамические эффекты и специальные эффекты частиц.

Обычная анимация использует API холста для создания регулярных шаблонов и анимаций.

Эффект

Эффекта относительно легко достичь. В основном мы анализируем реализацию углового смещения между шкалой и указателем.

В данном примере показана часовая шкала: на циферблате 12 часов, Math.PI равен 180°, а каждый час занимает 30°.

.save() означает сохранение состояния текущей среды холста и рисование на этой основе. После завершения рисования возвращаются ранее сохраненные статус и атрибуты пути.

То же самое касается минутной шкалы, просто измените угол и стиль.

 // Почасовая шкала времени offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Масштабируем цвет offscreenCanvasCtx.strokeStyle = '#fff'; // Масштабируем ширину offscreenCanvasCtx. lineWidth = 3; // Занимаем 30° каждый час вне экранаCanvasCtx.rotate(Math.PI / 6); // Начальная позиция рисования offscreenCanvasCtx.lineTo(140, 0) // Конечная позиция рисования; offscreenCanvasCtx.lineTo(120, 0); // Путь рисования offscreenCanvasCtx.stroke(); восстановить() ;

Возьмем, к примеру, секундную стрелку: найдите секунды текущего времени и рассчитайте соответствующий угол смещения.

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : //Second Hand offscreenCanvasCtx. сохранить (); offscreenCanvasCtx.rotate(sec * (Math.PI / 30) ...... offscreenCanvasCtx.stroke();

Canvas можно использовать для рисования сложных, необычных анимаций. Эффекты частиц можно использовать для достижения сложных, случайных динамических эффектов.

Частицы относятся к каждому пикселю в данных изображения imageData . После получения каждого пикселя добавьте атрибуты или события для взаимодействия с частицами в области для достижения динамических эффектов.

Эффект

В качестве примера возьмем преобразование изображения на рисунке ниже. Эффект заключается в том, чтобы сначала отобразить изображение на холсте, а затем получить каждый пиксель в области, где расположен текст.

 let image = new Image(); image.src='../image/logo.png'; let Pixels=[]; //Хранение данных пикселей let imageData; image.width = 300; image.height = 300 // Отрисуйте изображение и получите информацию о пикселях в области image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); imageData=ctx.getImageData((canvas.width-) image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //Получаем информацию о пикселях диаграммы //Рисуем изображение};

Размер картинки 300*300, всего 90 000 пикселей. Каждый пиксель занимает 4 бита и хранит данные rgba.

 function getPixels(){ var pos=0; var data=imageData.data; //данные одномерного массива RGBA //Высота и ширина исходного изображения равны 300 пикселей for(var i=1;i<=image.width ;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; //Получаем позицию пикселя if(data[pos]>=0){ var Pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //Сбрасываем каждый пиксель информация о позиции y: (canvas.height-image.height)/2+i+Math.random()*20, //Сбрасываем информацию о положении каждого пикселя fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' } Pixels.push(pixel); } } } } function drawPixels() { var Canvas = document.getElementById(myCanvas); Canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = Pixels.length, curr_pixel = null; for (var i = 0; i <len; i++) {curr_pixel); = пикселей [i]; ctx.fillStyle = curr_pixel.fillStyle; ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);

Рендеринг текстовых часов

 function time() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150 пикселей жирный шрифт; ctx.textBaseline = 'top'; ctx.fillStyle = rgba(245,245,245,0.2); (новый Date().format('чч:мм:сс'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight });

Эффект

Концепция частиц преобразования текста такая же, как и выше. Пиксели в выделенной области получаются, выбираются в соответствии с условиями фильтра и сохраняются в массиве. Перерисовать после обхода.

 function getPixels() { let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); let data = imgData.data PixelsArr = [] for(let i=1;i<=textHeight;i++){ for(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4 //Получаем позицию пикселя if(data[pos]>=0){ var Pixel={ x:j+Math.random()*; 20 , //Сбрасываем информацию о положении каждого пикселя y:i+Math.random()*20, //Сбрасываем информацию о положении каждого пикселя fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }; PixelsArr.push(пиксель); } } } }

imgData сохраняет информацию о пикселях в выбранной области, каждый пиксель занимает 4 бита, и сохраняет четырехбитную информацию RGBA. Фильтруя четвертый бит каждого пикселя, этот код сохраняет все пиксели с прозрачностью, отличной от 0, в массив pixelsArr .

x и y записывают информацию о положении частицы. Чтобы создать эффект движения при рендеринге, к каждой частице добавляется позиция смещения в размере 0–20 пикселей. Каждый раз, когда она перерисовывается, позиция смещения генерируется случайным образом. движение. Эффект.

После получения частиц необходимо очистить исходный текст на холсте и перерисовать полученные частицы на холсте.

 function drawPixels() { // Очищаем содержимое холста и перерисовываем ctx.clearRect(0,0,canvas.width,canvas.height); for (let i in PixelsArr) { ctx.fillStyle = PixelsArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, PixelsArr[i].y, r, р); } }

Стиль перерисовки частиц — это исходный цвет и прозрачность при фильтрации пикселей, а при рисовании каждой частицы на холсте определяется параметр размера r, а значение r — случайное число от 0 до 4. Полученные частицы имеют случайный размер.

После получения частиц и успешной перерисовки страницу необходимо обновить в режиме реального времени. Здесь используется метод window.requestAnimationFrame(callback) .

 function time() { ...... getpixels(); // Получаем частицы drawPixels() // Перерисовываем частицы requestAnimationFrame(time);

Метод window.requestAnimationFrame(callback) сообщает браузеру, что вы хотите выполнить анимацию, и просит браузер вызвать указанную функцию для обновления анимации перед следующей перерисовкой. Этот метод принимает в качестве параметра функцию обратного вызова, которая будет вызываться перед перерисовкой браузера.

Этот метод не требует установки временного интервала, а частота вызова принимает системный временной интервал (1 с).

Пояснения к документу нажмите здесь

Эффект

В этой статье динамический эффект часов достигается в основном двумя разными способами, среди которых часы с частицами более удобны в использовании. В будущей серии Canvas для системы частиц будет реализовано больше динамических эффектов.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.