HTML5 캔버스를 사용하여 눈송이를 내리는 방법

이 기사에서는 눈송이가 떨어지는 특수 효과를 자세히 설명하기 위해 HTML5 캔버스를 주로 소개합니다. 이 효과는 매혹적이고 사실적인 애니메이션 효과를 구현합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

나는 떨어지는 효과를 보여주는 디스플레이를 인터넷에서 많이 보았습니다. HTML5의 눈송이는 정말 매력적입니다. 모두가 저만큼 흥미를 갖고 코드를 구현하는 방법을 연구하고 싶어할 것입니다. 하지만 이러한 소스 코드는 여러 곳에서 다운로드할 수 있습니다. 그러한 애니메이션을 만들 때 다른 사람들의 아이디어와 생각은 무엇인지 분석합니다.

요즘 공부를 많이 해서 그 시간을 활용해서 수요분석부터 지식 포인트, 프로그래밍까지 차근차근 해부했어요. 웃지 마.

최종 렌더링은 다음과 같습니다.

그림 1

1. 수요 분석

1. 원형 눈송이

이 예에서는 눈송이의 모양이 원형

2입니다. 눈송이가 고정되었습니다

사진에 따르면 1. 하얀 눈송이의 개수를 주의 깊게 관찰하세요. 떨어지는 과정에서 전체 사진의 눈송이 개수가 고정되어야 합니다. 이 요구 사항은 관찰과 분석을 통해 얻어야 합니다. 이는 우리가 실제 생활에서 볼 수 있는 눈송이가 하늘 위로 날아다니는 장면과 일치합니다.

3. 눈송이의 크기가 일정하지 않습니다

눈송이마다 크기가 다르기 때문에 눈송이의 반경이 무작위입니다. 이는 우리가 현실에서 하늘 위로 눈송이가 날아다니는 모습을 보는 장면과도 일치한다.

4.눈송이의 위치가 움직입니다

눈송이가 떨어지면서 자연스럽게 그 위치도 움직입니다.

2. 지식 포인트

1. Html5 Canvas+JavaScript를 사용하여 원 그리기 - 원형 눈송이 만들기

Html5에서는 원형 눈송이 만들기 위해 Canvas와 JavaScript를 사용해야 합니다. (x ,y,r,start,stop);

2. 임의의 숫자 - 반경과 좌표가 다른 원형 눈송이를 생성합니다.

이 예에서 웹페이지가 처음 로드되면 특정 개수의 눈송이가 나타납니다. 서로 다른 반경과 위치를 생성해야 합니다. 따라서 눈송이가 떨어지는 과정에서 반경과 좌표는 임의의 숫자입니다. 반경은 변경되지 않고 특정 범위 내에서 좌표가 변경되므로 이때 좌표도 임의의 숫자입니다. Math.random()

3. 프로그래밍

1. 준비

캔버스를 넣고 몸 전체의 배경색을 검은색으로 설정합니다

HTML 코드:

<canvas id="mycanvas">
    您的浏览器不支持canvas画布   
</canvas>

CSS 코드:

* {   
    margin: 0;   
    padding: 0;   
}   
#mycanvas {   
    background: black;   
}

The 효과는 다음과 같습니다.

참고: 캔버스 기본적으로 초기화 높이와 너비가 있으므로 걱정할 필요가 없습니다.

2 캔버스는 전체 화면으로 표시됩니다.

자바스크립트입니다.

//获取mycanvas画布   
    var can = document.getElementById("mycanvas");   
    var ctx = can.getContext("2d");   
    //画布宽度   
    var wid = window.innerWidth;   
    //画布高度   
    var hei = window.innerHeight;   
    can.width=wid;   
    can.height=hei;

이때 효과는 다음과 같습니다.

3. 초기화 생성 고정된 수의 눈송이

위의 수요 분석 및 지식 포인트 해석에 따르면 우선, 눈송이의 개수는 고정되어 있으므로 변수 var snow = 100을 정의해야 합니다. 여기서는 눈송이의 개수를 100개로 가정합니다.

눈송이를 생성할 때 각 눈송이는 서로 다른 반경과 위치를 갖습니다. 눈송이를 객체로 사용하는 경우 이 객체의 속성에는 반경, 좌표(X, Y)가 포함되며 눈송이 객체는 var snowOject={x:1, y:10,r:5}로 작성될 수 있습니다. 여기서는 좌표가 (1,10)이고 반경이 5인 원형 눈송이입니다. 이 예에서는 반경과 좌표가 난수이므로 Math.random()을 사용하여 이를 각각 100으로 설정합니다. 각 눈송이는 반경과 좌표(X, Y)를 생성합니다. );

여기에는 100개의 눈송이가 있으므로 후속 작업을 용이하게 하기 위해 배열을 사용하여 이 100개의 눈송이 개체를 저장합니다.

JavaScript 코드는 다음과 같습니다:

//雪花数目   
var snow = 100;   
//雪花坐标、半径   
var arr = []; //保存各圆坐标及半径   
for (var i = 0; i < snow; i++) {   
arr.push({   
x: Math.random() * wid,   
y: Math.random() * hei,   
r: Math.random() * 10 + 1   
})   
}

4. 눈꽃 그리기

위에서 우리는 100개의 눈송이 반경과 좌표(X, Y)를 생성했습니다. 다음은 눈송이를 그리기 위해 루프에서 캔버스를 사용하는 것입니다. 원 그리기), 여기서 함수를 정의하세요

JavaScript 코드는 다음과 같습니다.

//画雪花   
function DrawSnow() {   
    ctx.fillStyle="white";   
    ctx.beginPath();   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        ctx.moveTo(p.x,p.y);   
        ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);   
    }   
    ctx.fill();   
  
    ctx.closePath();

그런 다음 DrawSnow() 함수를 호출하면 효과는 다음과 같습니다.

웹페이지를 여러 번 새로 고쳐 볼 수 있습니다. 다양한 크기와 위치의 눈송이가 생성되는 경우(일반적으로 예) 이렇게 하면 최종 효과에 가까워집니다.

참고: 여기에 100개의 원을 그려야 하기 때문에 그리기 시작 좌표는 1회마다 재정의됩니다. 원이 그려집니다: ctx.moveTo(p.x,p.y); 그렇지 않으면 이상한 효과가 나타납니다. 믿을 수 없다면 시도해 보세요

5. 펄럭이는 눈송이

안타깝게도 위에서는 100개의 눈송이를 그렸습니다. 웹 페이지를 새로 고쳐야 변경 효과를 볼 수 있지만 달성해야 할 것은 눈송이가 위치 이동을 멈추지 않는다는 것입니다.

먼저 눈송이를 계속해서 다시 그리려면 setInterval 함수를 사용해야 합니다. 여기서 간격은 50밀리초입니다. setInterval(DrawSnow,50);

同时每一朵雪花的坐标（X、Y）需要不停的改变（在一定幅度内），我们这里的雪花是从左上方飘落到右下方，所以每朵X、Y坐标值都在不停的增大，那我们用一个函数SnowFall()定义雪花飘过规则

该函数代码如下：

//雪花飘落   
function SnowFall() {   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        p.y += Math.random() * 2 + 1;   
        if (p.y > hei) {   
            p.y = 0;   
        }   
        p.x += Math.random() * 2 + 1;   
        if (p.x > wid) {   
            p.x = 0;   
    <span style="white-space:pre">    </span>}   
    }   
}

然后将该函数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()函数体内必须在前面执行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下：

//画雪花   
function DrawSnow() {   
    ctx.clearRect(0, 0, wid, hei);   
    ctx.fillStyle = "white";   
    ctx.beginPath();   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        ctx.moveTo(p.x, p.y);   
        ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
    }   
    ctx.fill();   
    SnowFall();   
    ctx.closePath();   
}

最后执行setInterval(DrawSnow, 50); 

OK，经过我们上述步骤，小伙伴们是否已经对整个过程及技术实现很清晰了。

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="js/jquery-1.8.3.min.js"></script>  
        <style type="text/css">  
            * {   
                margin: 0;   
                padding: 0;   
            }   
               
            #mycanvas {   
                background: black;   
            }   
        </style>  
    </head>  
  
    <body>  
        <canvas id="mycanvas">  
            您的浏览器不支持canvas画布   
        </canvas>  
        <script>  
            //获取mycanvas画布   
            var can = document.getElementById("mycanvas");   
            var ctx = can.getContext("2d");   
            //画布宽度   
            var wid = window.innerWidth;   
            //画布高度   
            var hei = window.innerHeight;   
            can.width = wid;   
            can.height = hei;   
            //雪花数目   
            var snow = 100;   
            //雪花坐标、半径   
            var arr = []; //保存各圆坐标及半径   
            for (var i = 0; i < snow; i++) {   
                arr.push({   
                    x: Math.random() * wid,   
                    y: Math.random() * hei,   
                    r: Math.random() * 10 + 1   
                })   
            }   
            //画雪花   
            function DrawSnow() {   
                ctx.clearRect(0, 0, wid, hei);   
                ctx.fillStyle = "white";   
                ctx.beginPath();   
                for (var i = 0; i < snow; i++) {   
                    var p = arr[i];   
                    ctx.moveTo(p.x, p.y);   
                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
                }   
                ctx.fill();   
                SnowFall();   
                ctx.closePath();   
            }   
            //雪花飘落   
            function SnowFall() {   
                for (var i = 0; i < snow; i++) {   
                    var p = arr[i];   
                    p.y += Math.random() * 2 + 1;   
                    if (p.y > hei) {   
                        p.y = 0;   
                    }   
                    p.x += Math.random() * 2 + 1;   
                    if (p.x > wid) {   
                        p.x = 0;   
                    }   
                }   
            }   
            setInterval(DrawSnow, 50);   
        </script>  
    </body>  
  
</html>

好了，今天分享就到这里，希望对大家的学习有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何在canvas里面基于随机点绘制一个多边形

用HTML5 Canvas来绘制三角形和矩形等多边形的方法

위 내용은 HTML5 캔버스를 사용하여 눈송이를 내리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!