캔버스에 일반 애니메이션과 입자 애니메이션을 구현하기 위한 코드 예제

캔버스는 웹페이지에 이미지나 애니메이션을 그리는 데 사용되며, 캔버스라고 이해하면 되고, 이 캔버스 위에 원하는 효과가 구현됩니다.

캔버스는 일반적으로 사용되는 일반 애니메이션 외에도 입자의 개념을 사용하여 보다 복잡한 동적 효과를 구현할 수도 있습니다. 이 기사에서는 일반적인 동적 효과와 입자 특수 효과를 사용하여 간단한 시계를 구현합니다.

일반 애니메이션은 캔버스 API를 사용하여 일반 패턴과 애니메이션을 구현합니다.

효과

효과는 비교적 간단하게 얻을 수 있습니다. 우리는 주로 스케일과 포인터 사이의 각도 오프셋 구현을 분석합니다.

이 예는 시간 단위 그림입니다. 다이얼에는 12시간이 있고 Math.PI는 180°이며 각 시간은 30°를 차지합니다.

.save()는 현재 캔버스 환경의 상태를 저장하고 이를 기반으로 그리는 것을 의미합니다. 그리기가 완료된 후에는 이전에 저장된 경로 상태 및 속성이 반환됩니다.

분 눈금도 마찬가지입니다. 각도와 스타일만 변경하면 됩니다.

 // 시간별 시간 단위 offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // 색상 크기 조절 offscreenCanvasCtx.trokStyle = '#fff'; lineWidth = 3; // 매 시간마다 30°를 차지합니다. offscreenCanvasCtx.rotate(Math.PI / 6); // 그리기 시작 위치 offscreenCanvasCtx.lineTo(140, 0) // 그리기 끝 위치; offscreenCanvasCtx.lineTo(120, 0); // 그리기 경로 offscreenCanvasCtx; 복원하다() ;

초침을 예로 들어 보겠습니다. 현재 시간의 초를 가져오고 해당 오프셋 각도를 계산합니다.

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : hr; 저장(); offscreenCanvasCtx.rotate(초 * (Math.PI / 30)); offscreenCanvasCtx.Stroke();

캔버스를 사용하면 복잡하고 불규칙한 애니메이션을 그릴 수 있습니다. 입자 효과를 사용하면 복잡하고 무작위적인 동적 효과를 얻을 수 있습니다.

입자는 이미지 데이터 imageData 의 각 픽셀을 참조합니다. 각 픽셀을 얻은 후 해당 영역의 입자와 상호 작용하는 속성이나 이벤트를 추가하여 동적 효과를 얻습니다.

효과

아래 그림의 이미지 변환을 예로 들면, 그 효과는 먼저 이미지를 캔버스에 렌더링한 다음 텍스트가 있는 영역의 각 픽셀을 얻는 것입니다.

 let image = new Image(); image.src='../image/logo.png'; //픽셀 데이터 저장 let image.width = 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의 1차원 배열 데이터 //소스 이미지의 높이와 너비는 300px입니다. for(var i=1;i<=image. 너비;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])+')' } pixel.push(pixel); } } } } function drawPixels() { var canvas = document.getElementById(myCanvas); canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = pixel.length, curr_pixel = null; for (var i = 0; i < len; i++) = 픽셀[i]; ctx.fillStyle = curr_pixel.fillStyle(curr_pixel.x, curr_pixel.y, 1, 1) } }

텍스트 시계 렌더링

 function time() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px 굵게; ctx.textBaseline='top' = rgba(245,245,245,0.2); (새로운 Date().format('hh:mm:ss'),(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 pixelArr = [] 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])+')' }; pixelArr.push(pixel) } } } }

imgData 선택한 영역의 픽셀 정보를 저장하며, 각 픽셀은 4비트를 차지하며 RGBA 4비트 정보를 저장합니다. 각 픽셀의 네 번째 비트를 필터링하는 이 코드는 투명도가 0이 아닌 모든 픽셀을 pixelsArr 배열에 저장합니다.

x 와 y 렌더링 시 모션 효과를 내기 위해 각 파티클에 0~20픽셀의 오프셋 위치를 추가하여, 다시 그려질 때마다 오프셋 위치를 무작위로 생성하여 생성합니다. 운동.

입자를 얻은 후에는 캔버스에서 원본 텍스트를 지우고 얻은 입자를 캔버스에 다시 그려야 합니다.

 function drawPixels() { // 캔버스 내용을 지우고 다시 그립니다. ctx.clearRect(0,0,canvas.width,canvas.height) for (let i in pixelArr) { ctx.fillStyle = pixelArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, pixelArr[i].y, r, r) } }

파티클 다시 그리는 스타일은 픽셀 필터링 시 원래의 색상과 투명도를 따르며, 각 파티클을 캔버스에 그릴 때 크기 매개변수 r이 정의되며 r의 값은 0~4 사이의 임의의 숫자입니다. 결과 입자의 크기는 무작위로 지정됩니다.

입자를 획득하고 성공적으로 다시 그린 후에는 페이지를 실시간으로 새로 고쳐야 합니다. 여기서는 window.requestAnimationFrame(callback) 메서드가 사용됩니다.

 function time() { ...... getpixels(); //입자 가져오기 drawPixels(); // 입자 다시 그리기 requestAnimationFrame(time) }

window.requestAnimationFrame(callback) 메서드는 애니메이션을 수행하고 싶다고 브라우저에 알리고 다음 다시 그리기 전에 애니메이션을 업데이트하기 위해 지정된 함수를 호출하도록 브라우저에 요청합니다. 이 메소드는 브라우저가 다시 그리기 전에 호출되는 콜백 함수를 매개변수로 사용합니다.

이 방법은 시간 간격을 설정할 필요가 없으며 호출 빈도는 시스템 시간 간격(1초)을 채택합니다.

문서 설명은 여기를 클릭하세요

효과

이 기사에서는 주로 두 가지 방법으로 시계의 동적 효과를 달성하며 그 중 입자 시계의 조작성이 더 뛰어납니다. 향후 캔버스 시리즈에서는 파티클 시스템에 더욱 역동적인 효과가 구현될 예정입니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.