H5 캔버스를 사용하여 공포 애니메이션 만들기

php中世界最好的语言
풀어 주다: 2018-03-13 16:33:45
원래의
3385명이 탐색했습니다.

이번에는 H5 캔버스를 사용하여 공포 애니메이션을 만드는 방법을 소개하겠습니다. H5 캔버스를 사용하여 공포 애니메이션을 만들 때 주의 사항은 무엇입니까?

캔버스는 흥미로운 효과와 애니메이션을 얻을 수 있습니다. 간단한 페이지 구현을 통해 기본적인 그리기 방법을 알아보세요.

Effect

Happy Halloween

기본 지식

let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');
로그인 후 복사

Start path

context.beginPath();
로그인 후 복사

beginPath() 메서드는 캔버스에서 그리기 경로를 시작하거나 현재 경로를 재설정합니다.

Move path

context.moveTo();
로그인 후 복사

moveTo() 메서드는 선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다.

Add line

context.lineTo();
로그인 후 복사

lineTo() 메서드는 새 점을 추가하고 해당 점에서 캔버스의 지정된 점까지 선을 만듭니다.

drawImage

context.drawImage(image,x,y);
로그인 후 복사

drawImage() 메서드는 캔버스에 이미지, 캔버스 또는 비디오를 그리거나 이미지의 일부를 그리고 이미지 크기를 늘리거나 줄일 수 있습니다.

픽셀 데이터 가져오기

context.getImageData(x,y,width,height);
로그인 후 복사

getImageData() 메서드는 직사각형의 픽셀 데이터를 지정하는 캔버스 imageData 개체를 가져올 수 있습니다.

imageData 개체의 각 픽셀에는 rgba 값이 있으며, 이는 배열 형식으로 data 속성에 저장됩니다.

픽셀 데이터 다시 넣기

context.putImageData(imageData,x,y);
로그인 후 복사

putImageData() 메서드는 획득한 이미지 데이터를 캔버스에 다시 넣습니다.

Implementation

html

<canvas id="canvas"></canvas><button id="click" class="switch">Click</button>
로그인 후 복사

css

html,body,canvas {    width: 100%;    height: 100%;    margin: 0;
}.switch {    position: absolute;    top: 70%;    right: 10%;    width: 50px;    height: 50px;    border-radius: 50px;    outline: none;    cursor: pointer;    animation: switch-animate alternate infinite ease 1s 0s;
}
@keyframes switch-animate {    from {        box-shadow: 0 0 30px #ece9c5;
    }    to {        box-shadow: 0 0 100px #eae5a7;
    }
}
로그인 후 복사

js

(function () {    class Halloween {        constructor(id) {            this.canvas = document.getElementById(id);            this.ctx = this.canvas.getContext(&#39;2d&#39;);            this.w = this.canvas.width;            this.h = this.canvas.height;            this.data = [];
        }        //初始画布
        initDraw(img) {            this.w = this.canvas.width = img.width;            this.h = this.canvas.height = img.height;            this.ctx.drawImage(img, 0, 0);            this.data = this.ctx.getImageData(0, 0, this.w, this.h);
        }        //显示文字
        drawText() {            this.ctx.font = &#39;60px Verdana&#39;;            this.ctx.fillStyle = &#39;#ffffff&#39;;            this.ctx.fillText(&#39;万圣节快乐&#39;, 350, 280);
        }        //闪电
        lightning() {            let ctx = this.ctx;
            ctx.strokeStyle = &#39;#fff&#39;;
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(800, 10);
            ctx.lineTo(600, 100);
            ctx.lineTo(500, 200);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(600, 100);
            ctx.lineTo(650, 170);
            ctx.stroke()
        }        //打雷
        thunder() {            let timer = Math.floor(800 * Math.random());            this.reverse();            this.lightning();            this.drawText();
            setTimeout(() => {                this.reset();
            }, timer);
        }        //反转画布
        reverse() {            let imgData = this.ctx.getImageData(0, 0, this.w, this.h);            for (var i = 0, len = imgData.data.length; i < len; i += 4) {
                imgData.data[i] = 255 - imgData.data[i];
                imgData.data[i + 1] = 255 - imgData.data[i + 1];
                imgData.data[i + 2] = 255 - imgData.data[i + 2];
                imgData.data[i + 3] = 255;
            }            this.ctx.putImageData(imgData, 0, 0);
        }        //重置画布
        reset() {            this.ctx.putImageData(this.data, 0, 0);
        }
    }    let halloween = new Halloween(&#39;canvas&#39;);    let canvas = document.getElementById(&#39;canvas&#39;);    let ctx = canvas.getContext(&#39;2d&#39;);    let img = new Image();
    img.src = &#39;/images/halloween.png&#39;;
    img.onload = () => {
        halloween.initDraw(img);
    }    document.getElementById(&#39;click&#39;).onclick = () => {
        halloween.thunder();
    }
})();
로그인 후 복사


H5 캔버스를 사용하여 공포 애니메이션 만들기

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어에 주목하세요. 홈페이지other관련 기사!

추천 자료:

프런트 엔드 개발의 SVG 애니메이션

캔버스를 사용하여 검은 배경과 특수 효과로 파편 불꽃놀이를 만드는 방법

위 내용은 H5 캔버스를 사용하여 공포 애니메이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿