一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:52:19 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下使用canvas实现雪花飘动效果代码示例,文章介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

一、canvas是什么?

HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

标签只是图形容器,您必须使用脚本来绘制图形。

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

二、canvas的基本用法

1.创建一个画布(Canvas)

1
<canvas id="myCanvas"></canvas>

2.使用JavaScript绘制图像

1
2
3
4
5
6
7
8
//首先找到<canvas>元素
var c=document.getElementById("myCanvas");
//然后创建context对象
var ctx=c.getContext("2d");
//下面的两行代码绘制一个红色的矩形:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</canvas>

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中绘制圆形, 我们将使用以下方法:

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

使用arc() 画一个圆

1
2
3
4
5
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)

1
2
3
4
5
6
7
8
9
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.创建雪花的对象数组

1
2
3
4
5
6
7
8
9
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.绘制雪花样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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()="" }<="" pre="">
<p>
    4.实现雪花飘动
</p>
<pre class="brush:js;"> 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,
                }
            }
        }
    }</count;i++){></pre>
<p>
    5.设置刷新
</p>
<pre class="brush:js;">  draw()
    //每毫秒刷新一次
 setInterval(draw,1)</pre>
<p>
    6.完整代码
</p>
<pre class="brush:xhtml;">
 
 
 <meta charset="UTF-8">
 <title>雪花飘飘之使用canvas元素用于在网页上绘制图形。</title>
  
 <style type="text/<a href=" http:="" www.111com.net="" cssdiv="" css.html"="" target="_blank">css</a>">
  *{
            margin:0;
            padding:0;
            /* background-color: seagreen; */
            background: url("雪人.jpg")  no-repeat;
            background-size:100% 100%;
        }
  /* .can{
            filter: blur(1px);
        } */
 </style>
 
 
 <canvas id="canvas" class="can" width="1280" height="720"></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>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"8ff49d16dec1e826","version":"2024.10.5","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"09a15e901f154c8c900d5950c76ccb92","b":1}" crossorigin="anonymous"></script>
 
</pre>
<p align="center">
    <a href="https://img.111cn.net/uploads/20220926/img_6331a1f168a5f30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220926/img_6331a1f168a5f30.jpg" alt=""></a>
</p>                   
 
 
                    <div class="articles">
                        <div class="tit02">
                            <h4>相关文章</h4>
                        </div>
                        <ul>
                                                                                                <li>
                                        <a target="_blank" href="/new/424663.htm">以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍</a>
                                        <span>12-31</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/424664.htm">未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍</a>
                                        <span>12-31</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/424662.htm">未定事件簿左然破浪远行怎么样</a>
                                        <span>12-31</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/424661.htm">桃源深处有人家行医问诊怎么玩</a>
                                        <span>12-31</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/424660.htm">恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍</a>
                                        <span>12-31</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/424659.htm">阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍</a>
                                        <span>12-31</span>
                                    </li>
                                                                                    </ul>
                    </div>
                </count;i++){>

热门栏目