BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

キャンバスを使った雪の結晶の効果を実現するコード例

2022-01-21 18:47:48

今日はcanvasを使って雪の結晶のエフェクトを実現します❄️。

I. キャンバスとは何ですか？

HTML5 の <canvas> 要素は、グラフィックを描画するために使用され、スクリプト（通常は JavaScript）によって実行されます。

canvas>タグはあくまでグラフィックの入れ物であり、グラフィックを描くにはスクリプトを使用する必要があります。

キャンバスを使って、パス、ボックス、円、文字を描いたり、画像を追加したりと、さまざまな使い方ができます。

II. キャンバスの基本的な使い方

1. キャンバスの作成（Canvas） 

<canvas id="myCanvas" width="200" height="100"></canvas>

2. JavaScriptで画像を描画する 

// First find the <canvas> element
var c=document.getElementById("myCanvas");
//then create the context object
var ctx=c.getContext("2d");
// The following two lines of code draw a red rectangle.
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

getContext("2d") オブジェクトは、パス、矩形、円、文字、画像の追加を描画する複数のメソッドを持つ、組み込みの HTML5 オブジェクトです。

fillStyleプロパティには、CSSカラー、グラデーション、パターンを設定できます。

3. キャンバス座標

キャンバスは2次元の格子状です。
キャンバスの左上隅の座標は(0,0)
ctx.fillRect(0,0,150,75);
上記のfillRectメソッドは、パラメータ(0,0,150,75)を持ちます。
意味：キャンバス上に、左上の角（0,0）から始まる150x75の矩形を描画します。

4.キャンバス - パス

moveTo(x,y) 線の始点となる座標を定義します。
lineTo(x,y) は行末の座標を定義する
キャンバスで円を描くには、次のメソッドを使います。 

arc(x,y,r,start,stop)

arc()を使って円を描画する 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

第三に、スノーフレークフローティングの実装というアイデア

1. キャンバス(Canvas)を作成する 

 var canvas =document.getElementById("canvas")
    //The parameter contextID specifies the type of canvas you want to draw on.
    //The only currently legal value is "2d", which specifies a two-dimensional drawing
    // and causes this method to return an environment object that derives a 2D drawing API.
    var context = canvas.getContext("2d")
    var w =window.innerWidth
    var h =window.innerHeight
    canvas.width = w;
    canvas.height =h;

2. 雪の結晶用のオブジェクトの配列を作成します。 

 var count =200 //number of snowflakes
    var snows=[] //array of snowflake objects
    for (var i=0 ; i< count;i++){
        snows.push({
            x:Math.random()*w,//Math.random() is used to generate random numbers from 0 to 1
            y:Math.random()*h,
            r:Math.random()*5,
        })
    }

3. 雪の結晶のスタイルを描く 

 function draw(){
        context.clearRect(0,0,w,h)
        context.beginPath()
        for(var i=0; i<count;i++){
            var snow = snows[i];// iterate through each snowflake
            context.fillStyle ="rgb(255,255,255)" //Set the style of the snowflakes
            context.shadowBlur=10;
            context.shadowColor="rgb(255,255,255)";
            //moveTo method is able to move to the specified coordinates
            context.moveTo(snow.x,snow.y)
            // use canvas arc() to create a circle
             // x, y, r: x and y coordinates of the center of the circle, r is the radius
            // 0,Math.PI * 2 start and end radians
            
            context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
            
        }
        // Canvas fill
        context.fill()
        move()
    }

4. スノーフレーク・フラッタリングの実装 

 function move(){
        for (var i=0;i<count;i++){
            var snow =snows[i];
            snow.y +=(7-snow.r)/10 //from top to bottom
            snow.x +=((5-snow.r)/10)//Fall from left to right
            if(snow.y>h){
                snows[i]={
                    x:Math.random()*w,
                    y:Math.random()*h,
                    r:Math.random()*5,
                }
            }
        }
    }

5. リフレッシュの設定 

  draw()
    //refresh every millisecond
 setInterval(draw,1)

6. フルコード 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Snowflake floating of using canvas element for drawing graphics on web pages. </title>
 
 <style type="text/css">
  *{
            margin:0;
            padding:0;
            /* background-color: seagreen; */
            background: url("snowman.jpg") no-repeat;
            background-size:100% 100%;
        }
  /* .can{
            filter: blur(1px);
        } */
 </style>
</head>
<body>
 <canvas id="canvas" class="can"></canvas>

 <script type="text/javascript">
    The //canvas element is used to draw graphics on a web page.
 var canvas =document.getElementById("canvas")
    //The parameter contextID specifies the type of canvas you want to draw on.
    //The only currently legal value is "2d", which specifies a two-dimensional drawing
    // and causes this method to return an environment object that derives a 2D drawing API.
    var context = canvas.getContext("2d")
    var w =window.innerWidth
    var h =window.innerHeight
    canvas.width = w;
    canvas.height =h;
    var count =200 //number of snowflakes
    var snows = [] // array of snowflake objects
    for (var i=0 ; i< count;i++){
        snows.push({
            x:Math.random()*w,//Math.random() is used to generate random numbers from 0 to 1
            y:Math.random()*h,
            r:Math.random()*5,
        })
    }
    // Draw snowflakes
    function draw(){
        context.clearRect(0,0,w,h)
        context.beginPath()
        for(var i=0; i<count;i++){
            var snow = snows[i];// iterate through each snowflake
            context.fillStyle ="rgb(255,255,255)" //Set the style of the snowflakes
            context.shadowBlur=10;
            context.shadowColor="rgb(255,255,255)";
            //moveTo method is able to move to the specified coordinates
            context.moveTo(snow.x,snow.y)
            // use canvas arc() to create a circle
             // x, y, r: x and y coordinates of the center of the circle, r is the radius
            // 0,Math.PI * 2 start and end radians
            
            context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
           
            
        }
        // Canvas fill
        context.fill()
        move()
    }
    //Snowflakes moving
    function move(){
        for (var i=0;i<count;i++){
            var snow =snows[i];
            snow.y +=(7-snow.r)/10 //from top to bottom
            snow.x +=((5-snow.r)/10)//Fall from left to right
            if(snow.y>h){
                snows[i]={
                    x:Math.random()*w,
                    y:Math.random()*h,
                    r:Math.random()*5,
                }
            }
        }
    }
    draw()
    //refresh every millisecond
 setInterval(draw,1)
 </script>
</body>
</html>

概要

雪の結晶フローティング効果のサンプルコードを達成するためにキャンバスの使用に関するこの記事は、このに導入され、より関連するキャンバス雪の結晶フローティングコンテンツは、以前の記事のスクリプトのホームを検索したり、次の関連記事を閲覧し続け、私はあなたが将来的には、スクリプトの家をよりサポートすることを願ってください！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します