如何使用html5实现雪花效果?通过canvas实现雪花飘动效果案例分享!

不知道各位小伙伴们是否有见过雪花,没有见到过的小伙伴们今天小编就来和大家讲讲有关于:"如何使用html5实现雪花效果?"这个问题的相关内容分享!

一、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>
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试