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

2023-12-02 0 748

今天我们就使用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)。
意思是:在画布上绘制 150×75 的矩形,从左上角开始 (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雪花飘动内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 HTML5 使用canvas实现雪花飘动效果的示例代码 https://www.u-9.cn/sheji/html5/27634.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务