今天我们就使用canvas来实现雪花飘落的效果❄️
一、canvas是什么？
HTML5
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
二、canvas的基本用法
1.创建一个画布（Canvas）
2.使用JavaScript绘制图像
//首先找到
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
4.实现雪花飘动
function move(){
for (var i=0;ih){
snows[i]={
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*5,
}
}
}
}
5.设置刷新
draw()
//每毫秒刷新一次
setInterval(draw,1)
6.完整代码
雪花飘飘之使用canvas元素用于在网页上绘制图形。
总结
到此这篇关于使用canvas实现雪花飘动效果的示例代码的文章就介绍到这了,更多相关canvas雪花飘动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
网站类容多为转载，如有侵权，请联系站长删除
上一个：前端Html5如何实现分享截图的示例代码HTML5中外部浏览器唤起微信分享功能的代码html5 canvas手势解锁源码分享HTML5中外部浏览器唤起微信分享Html5页面二次分享的实现微信端html5页面调用分享接口示例详解html5 canvas 微信海报分享（个人爬坑）利用HTML5 Canvas制作键盘及鼠标动画的实例分享使用纯HTML5编写一款网页上的时钟的代码分享使用html5 canvas 画时钟代码实例分享HTML5图片预览实例分享
下一个：利用html+css实现菜单栏缓慢下拉效果的示例代码如何通过 display:olck/none 完成一个菜单栏使用layui实现左侧菜单栏及动态操作tab项的方法Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码使用HTML+CSS实现鼠标划过的二级菜单栏的示例详解css3 Transition属性（平滑过渡菜单栏案例）菜单栏 “三” 变形为“X”css3过渡动画利用CSS实现几款不错的菜单栏实例代码CSS仿网易首页的头部菜单栏按钮和三角形制作方法纯CSS制作菜单栏当鼠标经过时会变色的
