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


Posted in HTML / CSS onMarch 30, 2021

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

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

总结

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

 
HTML / CSS 相关文章推荐
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
You might like
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
加班费申请报告
2015/05/15 职场文书
汶川大地震感悟
2015/08/10 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
警用民用对讲机找不同
2022/02/18 无线电
nginx设置资源请求目录的方式详解
2022/05/30 Servers