Canvas如何实现樱花雨
Canvas如何实现樱花雨
一、前言
hi~大家好，我是冰糖。这篇博客是我2023年第一篇博客，在这里先定一个小目标：2023年成为优秀的前端开发者和博主。
那么好，今天我带大家完成一个Canvas的小案例——樱花落。下面是效果图：
看起来还不错，究竟是怎么实现的呢？我为大家分布讲解
二、定义画布
第一步，初始化画布以及上下文ctx
function startDraw() {// 定义画布let canvas = document.querySelector("canvas"), ctx;// 初始化画布的宽高canvas.width = window.innerWidth;canvas.height = window.innerHeight;ctx = canvas.getContext("2d");ctx.save() // 保存初始的状态：这一步对后面有用....
}
三、绘制单个花瓣
这里介绍canvas绘制图片的方法。参考链接
let img = new Image();
img.src = "img/huaban.png";ctx.drawImage(img,0,0,40,40)
// 图片加载完成时开始画
img.onload = function () {startDraw()
}
四、定义花瓣类
function huaban(x, y, s, r) {this.x = xthis.y = ythis.s = sthis.r = r
}
huaban.prototype.draw = function (ctx) {ctx.translate(this.x, this.y)ctx.rotate(this.r)ctx.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)ctx.restore()ctx.save()
}
function huabanList() {this.list = []
}
huabanList.prototype.draw = function (ctx) {ctx.clearRect(0, 0, canvas.width, canvas.height)this.list.forEach((item) => {item.draw(ctx)})
}
huabanList.prototype.push = function (item) {this.list.push(item)
}
huabanList.prototype.update = function () {this.list.forEach((item) => {item.update()})
}
五、绘制花瓣
通过给定每一个花瓣下所在的坐标（x，y），大小s，以及旋转角度r，绘制出num多少的花瓣
let num = 100
let stop
let newHuabanList = new huabanList()function startDraw() {// 定义画布let canvas = document.querySelector("canvas"), ctx;// 初始化画布的宽高canvas.width = window.innerWidth;canvas.height = window.innerHeight;ctx = canvas.getContext("2d");ctx.save()// 生成花瓣for (let i = 0; i < num; i++) {let randomX, randomY, randomS, randomR, newHuaban;randomX = getRandom("x");randomY = getRandom("y");randomR = getRandom("r");randomS = getRandom("s");newHuaban = new huaban(randomX, randomY, randomS, randomR);newHuabanList.push(newHuaban);}ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)// 画花瓣newHuabanList.draw(ctx)// 动画...待完成
}function getRandom(option) {var ret, random;switch (option) {case "x":// x轴随机坐标ret = Math.random() * window.innerWidth;break;case "y":// y轴随机坐标ret = Math.random() * window.innerHeight;break;case "s":ret = Math.random();break;case "r":ret = Math.random() * 6;break;...}return ret;
}六、添加动画
上一步完成后花瓣分布在屏幕随机位置，但是并没有移动，我们通过requestAnimationFrame()先clearRect()清除画布，然后更新每个花瓣位置，再绘制一遍，递归完成（还需要特判花瓣是否超出屏幕）
function startDraw() {....// 动画stop = requestAnimationFrame(function () {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布newHuabanList.update(); // 更新newHuabanList.draw(ctx); // 绘制stop = requestAnimationFrame(arguments.callee); // 递归重绘});
}
// 更新位置
huaban.prototype.update = function () {this.x = getRandom("fnx")(this.x, this.y)this.y = getRandom("fny")(this.x, this.y)this.r = getRandom("fnr")(this.r)if (// 判断是否超出边界this.x > window.innerWidth ||this.x < 0 ||this.y > window.innerHeight ||this.y < 0) {// 如果超出边界 则重新生成随机坐标this.r = getRandom("fnr");if (Math.random() > 0.4) {// 如果随机值大于0.4 则重新生成x轴随机坐标this.x = getRandom("x");this.y = 0;this.s = getRandom("s");this.r = getRandom("r");} else {// 如果随机值小于0.4 则重新生成y轴随机坐标this.x = window.innerWidth;this.y = getRandom("y");this.s = getRandom("s");this.r = getRandom("r");}}
}function getRandom(option) {var ret, random;switch (option) {...case "fnx":// x轴随机函数random = -0.1 + Math.random() * 1;ret = function (x, y) {return x + 0.5 * random - 1;};break;case "fny":// y轴随机函数random = 0.4 + Math.random() * 0.7;ret = function (x, y) {return y + random;};break;case "fnr":// r轴随机函数random = Math.random() * 0.02;ret = function (r) {return r + random;};break;}return ret;
}总结
- 完成此案例，得先知道一个花瓣怎么绘制到多个，到动起来
- 坑：确定画布大小后需要
ctx.save()对画布初始进行保存，后续更改画布位置，比如：旋转，移动后。都需要对画布还原ctx.restore()
最后，留一个源码地址供大家参考源代码，也感谢各位的star和点赞。感谢您的支持！
Canvas如何实现樱花雨相关推荐
- 我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的 ...
- 爱她就送ta一场樱花雨
如果你喜欢上一个人,该怎样对他(她)表白呢?该怎样表达出你真正的心意呢?你可能想过去表白,可是却不知道该从何说起.其实表白成功与否都无妨,但你要保持一个正确的心态来看待这件事情,如果害怕拒绝,那么你这 ...
- 我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)...
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的 ...
- HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...
- 超火的炫酷告白源码(HTML+CSS)，前端表白源码，520表白，七夕情人节专属源码--文字开场白+相册旋转+浪漫3D樱花樱花雨
表白的套路很多,少不了送花送礼物,真情重要,钱就物质啦~ 我能给各位做的可能就只有分享一些表白源码了,很简单,一看就会.无论是在追女神的路上,还是女朋友,老婆,都可用哦.赶紧收藏起来啦,这样的节日很多 ...
- HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
- HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- 专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
- 樱花雨html,樱花雨
又是樱花盛开的季节,我在等风,风是否也在等我? 我听说樱花本来只有白色,而那些壮志未酬的武士选择在他们喜爱的樱花树下了结自己的生命,鲜红的血缓缓的渗进泥土里,把樱花的花瓣渐渐染成了红色,樱花的花瓣越红 ...
最新文章
- java多线程机制_Java的多线程机制
- 初学Java Web开发，请远离各种框架，从Servlet开发
- vsCode 开发微信小程序插件
- 7-57 又来一个上三角数字三角形 (10 分)
- Kubernetes 1.13 版本发布：Kubeadm简化群集管理、容器存储接口（CSI）和CoreDNS作为默认DNS现已普遍可用
- 晓庄2019c语言真题卷,南京晓庄学院—C语言期末考试复习提纲
- Python控制语句执行流程
- mysql 字段_【MySql】mysql 字段个数的限制
- 大学生创业如何选择一个不错的创业新项目？
- 前端开发应知网站(强烈推荐！)
- 我为什么从 Google 辞职，开始为自己工作？
- HTTPS网络流量分析方法简介
- 机器学习中数据缺失值处理方法
- 抑郁症治疗过程中有哪些变化？
- zznu 2054 : 油田
- jquery中的data-icon和data-role
- 音频算法检测发言者方位
- 改springboot项目遇到的@Restcontroller返回网页问题
- 共同父域下的单点登录
- 子网掩码 与同一网段