使用canvas实现雪花飘动效果的示例代码_html5

今天我们就使用canvas来实现雪花飘落的效果❄️

一、canvas是什么？

html5 <canvas> 元素用于图形的绘制，通过脚本 (通常是javascript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二、canvas的基本用法

1.创建一个画布（canvas）

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

2.使用javascript绘制图像

//首先找到<canvas>元素
var c=document.getelementbyid("mycanvas");
//然后创建context对象
var ctx=c.getcontext("2d");
//下面的两行代码绘制一个红色的矩形：
ctx.fillstyle="#ff0000";
ctx.fillrect(0,0,150,75);

getcontext("2d") 对象是内建的 html5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

设置fillstyle属性可以是css颜色，渐变，或图案。fillstyle 默认设置是#000000。

3.canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
ctx.fillrect(0,0,150,75);
上面的 fillrect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

4.canvas - 路径

moveto(x,y) 定义线条开始坐标
lineto(x,y) 定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:

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")
    //参数 contextid 指定了您想要在画布上绘制的类型。
    //当前唯一的合法值是 "2d"，它指定了二维绘图，
    //并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 api。
    var context = canvas.getcontext("2d")
    var w =window.innerwidth
    var h =window.innerheight
    canvas.width = w;
    canvas.height =h;

2.创建雪花的对象数组

 var count =200 //雪花的个数
    var snows=[] //雪花对象数组
    for (var i=0 ; i< count;i++){
        snows.push({
            x:math.random()*w,//math.random()用于生成0～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];//遍历每一片雪花
            context.fillstyle ="rgb(255,255,255)" //设置雪花的样式
            context.shadowblur=10;
            context.shadowcolor="rgb(255,255,255)";
            //moveto 的方法是可以移动到指定的坐标
            context.moveto(snow.x,snow.y)
            // 使用canvas arc()创建一个圆形
             //x，y，r：圆的中心的x坐标和y坐标，r为半径
            //0,math.pi * 2起始弧度和结束弧度
            
            context.arc(snow.x,snow.y,snow.r,0,math.pi * 2)
            
        }
        //画布填充
        context.fill()
        move()
    }

4.实现雪花飘动

 function move(){
        for (var i=0;i<count;i++){
            var snow =snows[i];
            snow.y +=(7-snow.r)/10 //从上往下飘落
            snow.x+=((5-snow.r)/10)//从左到右飘落
            if(snow.y>h){
                snows[i]={
                    x:math.random()*w,
                    y:math.random()*h,
                    r:math.random()*5,
                }
            }
        }
    }

5.设置刷新

  draw()
    //每毫秒刷新一次
 setinterval(draw,1)

6.完整代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>雪花飘飘之使用canvas元素用于在网页上绘制图形。</title>
 
 <style type="text/css">
  *{
            margin:0;
            padding:0;
            /* background-color: seagreen; */
            background: url("雪人.jpg")  no-repeat;
            background-size:100% 100%;
        }
  /* .can{
            filter: blur(1px);
        } */
 </style>
</head>
<body>
 <canvas id="canvas" class="can"></canvas>

 <script type="text/javascript">
    //canvas 元素用于在网页上绘制图形。
 var canvas =document.getelementbyid("canvas")
    //参数 contextid 指定了您想要在画布上绘制的类型。
    //当前唯一的合法值是 "2d"，它指定了二维绘图，
    //并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 api。
    var context = canvas.getcontext("2d")
    var w =window.innerwidth
    var h =window.innerheight
    canvas.width = w;
    canvas.height =h;
    var count =200 //雪花的个数
    var snows=[] //雪花对象数组
    for (var i=0 ; i< count;i++){
        snows.push({
            x:math.random()*w,//math.random()用于生成0～1的随机数
            y:math.random()*h,
            r:math.random()*5,
        })
    }
    //绘制雪花
    function draw(){
        context.clearrect(0,0,w,h)
        context.beginpath()
        for(var i=0; i<count;i++){
            var snow = snows[i];//遍历每一片雪花
            context.fillstyle ="rgb(255,255,255)" //设置雪花的样式
            context.shadowblur=10;
            context.shadowcolor="rgb(255,255,255)";
            //moveto 的方法是可以移动到指定的坐标
            context.moveto(snow.x,snow.y)
            // 使用canvas arc()创建一个圆形
             //x，y，r：圆的中心的x坐标和y坐标，r为半径
            //0,math.pi * 2起始弧度和结束弧度
            
            context.arc(snow.x,snow.y,snow.r,0,math.pi * 2)
           
            
        }
        //画布填充
        context.fill()
        move()
    }
    //雪花飘动
    function move(){
        for (var i=0;i<count;i++){
            var snow =snows[i];
            snow.y +=(7-snow.r)/10 //从上往下飘落
            snow.x+=((5-snow.r)/10)//从左到右飘落
            if(snow.y>h){
                snows[i]={
                    x:math.random()*w,
                    y:math.random()*h,
                    r:math.random()*5,
                }
            }
        }
    }
    draw()
    //每毫秒刷新一次
 setinterval(draw,1)
 </script>
</body>
</html>