HTML5에서 눈 효과를 얻는 방법-HTML 튜토리얼-php.cn

HTML5에서 눈 효과를 얻는 방법

一个新手

풀어 주다： 2018-05-17 16:14:23

원래의

8830명이 탐색했습니다.

눈이 내리는 효과를 얻으려면 먼저 효과를 미리 살펴보세요.

먼저 이 효과를 분석해 보겠습니다.

1. 눈송이는 동시에 생성되지 않고 순차적으로 생성됩니다.

3. 눈은 어떻게 표현하나요? 5. 눈송이는 클 수도 있고 작을 수도 있습니다.

위의 질문을 이해하면 기본적으로 이 효과가 달성됩니다. 이것은 전체 화면 효과입니다. 캔버스를 동적으로 생성하고 전체 브라우저의 너비와 높이를 캔버스

var Canvas = function (w, h) {
                this.width = w;
                this.height = h;
            }
            Canvas.prototype = {
                init: function () {
                    var oC = document.createElement("canvas");
                    oC.setAttribute(&#39;width&#39;, this.width);
                    oC.setAttribute(&#39;height&#39;, this.height);
                    oC.setAttribute(&#39;id&#39;, &#39;canvas&#39;);
                    oC.style.backgroundColor = &#39;#000&#39;;
                    document.body.appendChild(oC);
                }
            }
            var curWinWidth = window.innerWidth,
                curWinHeight = window.innerHeight;
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
            oCanvas.init();

로그인 후 복사

에 할당합니다. oCanvas 개체의 init 메서드를 호출하면 캔버스가 끝에 추가됩니다. 몸체는 캔버스이고 너비는 , 높이는 브라우저의 너비와 높이와 동일하며 배경은 검은색으로 밤에 눈이 내리는 효과

다음으로 무대는 배우들의 차례입니다. 무대에 올라오세요. 눈송이를 생성하는 방법은 무엇인가요? 여기에서 눈 관련 작업은 클래스로 캡슐화됩니다. 기본 구조는 다음과 같습니다.

var Snow = function(){}
Snow.prototype = {
　　init : function(){},
　　draw : function( cxt ) {},
　　update : function(){}
}

로그인 후 복사

이 클래스에는 세 가지 메서드(init, draw, update)가 있습니다.

init: 눈송이의 위치(x, y 좌표)를 초기화합니다. ), 속도, 반경(눈송이의 크기, 여기서는 반경이 다른 원을 사용하여 눈송이를 나타냅니다.)

function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            init: function () {
                    this.x = random(0, width);
                    this.y = 0;
                    this.r = random(1, 5);
                    this.vy = random(3, 5);
                }

로그인 후 복사

그런 다음 초기화와 이 임의 함수를 사용하여 눈송이 초기화를 완료할 수 있습니다

1. 눈송이가 나올 때 일반적으로 안에 있습니다. 화면 상단에 나타나므로 눈송이의 y좌표는 모두 0이다. 둘째, 눈송이의 x좌표는 랜덤이고 그 범위는 화면의 왼쪽에서 오른쪽이므로 0이다. ~ 너비. 이 너비는 캔버스의 너비, 즉 브라우저의 너비

2, 눈송이의 반경 r, 1 ~ 5

3 사이의 값으로 설정되며, 눈송이의 낙하 속도는 입니다. 3~5 사이의 임의의 속도로 설정했는데 여기서는 눈을 만들었습니다. 수직 방향으로 아래쪽으로 떠 있게 됩니다. 확장하여 바람의 영향을 고려할 수 있습니다. (이때 수평 속도가 있어야 합니다.)

이러한 초기화 매개변수를 만든 후 , 그리기 방법을 개선하고 눈송이를 그립니다.

draw: function (cxt) {
                    cxt.beginPath();
                    cxt.fillStyle = &#39;white&#39;;
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                    cxt.fill();
                    cxt.closePath();
                    this.update(cxt);
                },

로그인 후 복사

매개변수 cxt는 캔버스 컨텍스트이며, 이 함수는 마지막에 원(눈송이)을 그리기 위해 init에 설정된 값을 호출하는 호 방법입니다. 업데이트 메소드가 호출되는 이유는 무엇입니까? 수직 방향으로 눈송이의 속도를 업데이트합니다

update: function (cxt) {
                    if (this.y < height - this.r) {
                        this.y += this.vy;
                    } else {
                        this.init();
                    }
                }

로그인 후 복사

업데이트 방법에서 경계 판단을 내립니다. 눈송이가 아래로 떨어지면 반드시 사라지게 됩니다. 국경에 도달하지 못한 경우 어떻게 해야 합니까?

캔버스의 높이에서 눈송이의 반경을 뺀 값이 눈송이가 사라질 때의 경계이므로 this.y < height - this.r 이 조건이 true이면 눈송이가 생겼다는 뜻입니다. y 방향의 위치가 업데이트되고 눈송이가 ('눈이 내린다') 것처럼 보입니다. 눈송이가 사라지려고 하면 초기 위치로 이동하여 눈이 보이도록 합니다. 눈송이를 다시 그릴 필요 없이 원 안에 계속해서 눈이 내리는 것처럼(이렇게 하면 성능에 확실히 영향을 미치며 이 특수 효과는 결국에는 확실히 멈출 것입니다. 이 작은 트릭은 많은 유사한 특수 효과에서 사용됩니다) . 이 시점에서 핵심 프로세스가 완료되었습니다. 다음으로 많은 수의 눈송이를 생성합니다.

var snow = [];
            for (var i = 0; i < 500; i++) {
                setTimeout(function () {
                    var oSnow = new Snow();
                    oSnow.init();
                    snow.push(oSnow);
                }, 10 * i);
            }

로그인 후 복사

500개의 눈송이를 동시에 생성한 다음 이 눈송이를 눈 배열에 저장하세요.

그런 다음 타이머를 켜고 눈송이가 계속 떨어지도록 하세요.

requestAnimationFrame 사용에 대해서는 다음을 참조하세요. 내 기사 기사: [JS Master's Road] HTML5의 새로운 타이머 요청AnimationFrame 실제 진행률 표시줄

(function move() {
                oGc.clearRect(0, 0, width, height);
                for (var i = 0; i < snow.length; i++) {
                    snow[i].draw(oGc);
                }
                requestAnimationFrame(move);
            })();

로그인 후 복사

전체 데모 코드:


    
    
    
    雪花效果 - by ghostwu
    
    




    <script>
        window.onload = function () {
            var Canvas = function (w, h) {
                this.width = w;
                this.height = h;
            }
            Canvas.prototype = {
                init: function () {
                    var oC = document.createElement(&quot;canvas&quot;);
                    oC.setAttribute(&amp;#39;width&amp;#39;, this.width);
                    oC.setAttribute(&amp;#39;height&amp;#39;, this.height);
                    oC.setAttribute(&amp;#39;id&amp;#39;, &amp;#39;canvas&amp;#39;);
                    oC.style.backgroundColor = &amp;#39;#000&amp;#39;;
                    document.body.appendChild(oC);
                }
            }
            var curWinWidth = window.innerWidth,
                curWinHeight = window.innerHeight;
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
            oCanvas.init();

            var oC = document.querySelector(&#39;#canvas&#39;);
            var width = oC.width, height = oC.height, oGc = oC.getContext(&#39;2d&#39;);

            function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            var Snow = function () {

            }
            Snow.prototype = {
                init: function () {
                    this.x = random(0, width);
                    this.y = 0;
                    this.r = random(1, 5);
                    this.vy = random(3, 5);
                },
                draw: function (cxt) {
                    cxt.beginPath();
                    cxt.fillStyle = &amp;#39;white&amp;#39;;
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                    cxt.fill();
                    cxt.closePath();
                    this.update(cxt);
                },
                update: function (cxt) {
                    if (this.y &lt; height - this.r) {
                        this.y += this.vy;
                    } else {
                        this.init();
                    }
                }
            }

            var snow = [];
            for (var i = 0; i &lt; 500; i++) {
                setTimeout(function () {
                    var oSnow = new Snow();
                    oSnow.init();
                    snow.push(oSnow);
                }, 10 * i);
            }

            (function move() {
                oGc.clearRect(0, 0, width, height);
                for (var i = 0; i &lt; snow.length; i++) {
                    snow[i].draw(oGc);
                }
                requestAnimationFrame(move);
            })();
        }
    </script>

로그인 후 복사

위 내용은 HTML5에서 눈 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!