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

今天我们就使用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;
     icount;
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;
    icount;
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;
     icount;
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;
    icount;
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>
    

总结

到此这篇关于使用canvas实现雪花飘动效果的示例代码的文章就介绍到这了,更多相关canvas雪花飘动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！