通过canvas画出爱心图案,表达你的爱意!
创始人
2024-05-29 22:31:05
0

在这里插入图片描述
通过canvas画出爱心图案,浏览器可以使用以下js代码,新建对象时,会自动呈现动画效果,代码文末可下载。

点击免费下载源码

let HeartCanvas = new HeartCanvas()

/*** 爱心* Heart Canvas*/class HeartCanvas {/*** @param hMin 颜色 h 最小值* @param hMax 颜色 h 最大值* @param countHeart 心的数量* @param sizeMin 心形最小值* @param sizeMax 心形最大值* @param bgColor 背景颜色*/constructor(hMin, hMax, countHeart = 150, sizeMin = 50, sizeMax = 350, bgColor) {this.isPlaying = true // 默认自动播放this.mouseX = 0this.mouseY = 0this.configFrame = {width : 1200,height: 300,bgColor: bgColor}this.configHeart = {timeLine: 0,                           // 时间线timeInit: new Date().getTime(),movement: 1,                           // 运动速度x: 50,                                 // 位置 xy: 50,                                 // 位置 ywidth: 200,                            // heart 大小height: 200,                           // heart 大小countHeart: countHeart || 150,         // heart 数量// 大小sizeMin: isNaN(sizeMin) ?50: sizeMin,  // 最小值sizeMax: isNaN(sizeMax) ?350: sizeMax, // 最大值// 颜色colorSaturate: 100,                    // 颜色饱和度 0-100colorLight: 60,                        // 颜色亮度 0-100hMin: isNaN(hMin) ?330: hMin,          // 色值最小hMax: isNaN(hMax) ?350: hMax,          // 色值最大minOpacity: 20,                        // 透明度最小 %maxOpacity: 100,                       // 透明度最大 %opacityGrowth: 5,                      // 透明度增长值// 出现的位置范围heartRangeMin: 0,                      // 心出现的位置,从下面算起,取值 0.0-1.0heartRangeMax: 0.3,// 加速度gravityMin: 1,                         // 加速度 mingravityMax: 9.8,                       // 加速度 maxflowDirection: 1,                      // 运动方向 1 向上 -1 向下}this.heartBuffer = [] // 心缓存this.init()window.onresize = () => {this.configFrame.height = innerHeight * 2this.configFrame.width = innerWidth * 2let heartLayer = document.getElementById('heartLayer')this.updateFrameAttribute(heartLayer)}}play(){if (this.isPlaying){} else {this.isPlaying = truethis.draw()}}stop(){this.isPlaying = false}moveDown(){this.configHeart.flowDirection = -1}moveUp(){this.configHeart.flowDirection = 1}speedUp(){}speedDown(){}destroy(){this.isPlaying = falselet heartLayer = document.getElementById('heartLayer')heartLayer.remove()console.log('动画已停止')}updateFrameAttribute(heartLayer){heartLayer.setAttribute('id', 'heartLayer')heartLayer.setAttribute('width', this.configFrame.width)heartLayer.setAttribute('height', this.configFrame.height)heartLayer.style.width = `${this.configFrame.width / 2}px`heartLayer.style.height = `${this.configFrame.height / 2}px`heartLayer.style.zIndex = '-3'heartLayer.style.userSelect = 'none'heartLayer.style.position = 'fixed'heartLayer.style.top = '0'heartLayer.style.left = '0'}init(){this.configFrame.height = innerHeight * 2this.configFrame.width = innerWidth * 2let heartLayer = document.createElement("canvas")this.updateFrameAttribute(heartLayer)document.documentElement.append(heartLayer)this.configHeart.timeLine =  0// 填充缓存形状for (let i = 0; i < this.configHeart.countHeart; i++) {let randomSize = randomInt(this.configHeart.sizeMin, this.configHeart.sizeMax)let x = randomInt(0, this.configFrame.width)let y = randomInt(this.configFrame.height * (1-this.configHeart.heartRangeMax), this.configFrame.height * (1-this.configHeart.heartRangeMin))this.heartBuffer.push({id: i,gravity: randomFloat(this.configHeart.gravityMin, this.configHeart.gravityMax),opacity: 0,opacityFinal: randomInt(this.configHeart.minOpacity, this.configHeart.maxOpacity), // 最终透明度timeInit: randomInt(1, 500), // 随机排布初始 heart 的位置x, // 位置 xy, // 位置 yoriginalX: x,originalY: y,width: randomSize,  // heart 大小height: randomSize, // heart 大小colorH: randomInt(this.configHeart.hMin, this.configHeart.hMax)})}this.draw()document.documentElement.addEventListener('mousemove', event => {this.mouseX = event.xthis.mouseY = event.y})}// 判断鼠标跟 box 的距离isMouseIsCloseToBox(box){let distance = Math.sqrt(Math.pow(Math.abs(box.position.x / 2 - this.mouseX),2) + Math.pow(Math.abs(box.position.y /2  - this.mouseY), 2))return distance < 100}draw() {// 建立自己的时间参考线,消除使用系统时间时导致的切换程序后时间紊乱的情况this.configHeart.timeLine = this.configHeart.timeLine + 1// create heartlet canvasHeart = document.getElementById('heartLayer')let contextHeart = canvasHeart.getContext('2d')contextHeart.clearRect(0, 0, this.configFrame.width, this.configFrame.height)// 背景,没有 bgColor 的时候,背景就是透明的if (this.configFrame.bgColor){contextHeart.fillStyle = this.configFrame.bgColorcontextHeart.fillRect(0,0,this.configFrame.width, this.configFrame.height)}this.heartBuffer.forEach(heart => {// 当出了画面时if (heart.y < -(heart.height)){heart.y = heart.originalYheart.timeInit = this.configHeart.timeLine // 重新定位时间节点heart.opacity = 0}// 当透明度到达最终透明度时let timeGap = this.configHeart.timeLine - heart.timeInit // 时间为正数时才计算透明度if (timeGap > 0){heart.opacity = heart.opacity * ((this.configHeart.timeLine - heart.timeInit)/100)} else { // 没到该 heart 的展示时间时,透明度为 0,不显示heart.opacity = 0}if (heart.opacity >= heart.opacityFinal){heart.opacity = heart.opacityFinal // 定位到最终的透明度}// 1/2 gt㎡  运动轨迹// let movement = 1/2 * this.configHeart.gravity * Math.pow((new Date().getTime() - heart.timeInit)/1000,2)// speed = 1/2 gtlet movement = 1/2 * heart.gravity * (this.configHeart.timeLine - heart.timeInit) / 300 * this.configHeart.flowDirectionheart.y = heart.y - movementthis.drawHeart(heart.x,heart.y,heart.width / 2,heart.height / 2,`hsl(${heart.colorH} ${this.configHeart.colorSaturate}% ${this.configHeart.colorLight}% / ${heart.opacity}%)`)heart.opacity = heart.opacity + this.configHeart.opacityGrowth})if (this.isPlaying) {window.requestAnimationFrame(() => {this.draw()})}}// 画一个心drawHeart(x, y, width, height, colorFill) {let canvasHeart = document.getElementById('heartLayer')let contextHeart = canvasHeart.getContext('2d')contextHeart.save()contextHeart.beginPath()let topCurveHeight = height * 0.3contextHeart.moveTo(x, y + topCurveHeight)// top left curvecontextHeart.bezierCurveTo(x, y,x - width / 2, y,x - width / 2, y + topCurveHeight)// bottom left curvecontextHeart.bezierCurveTo(x - width / 2, y + (height + topCurveHeight) / 2,x, y + (height + topCurveHeight) / 1.4,x, y + height)// bottom right curvecontextHeart.bezierCurveTo(x, y + (height + topCurveHeight) / 1.8,x + width / 2, y + (height + topCurveHeight) / 2,x + width / 2, y + topCurveHeight)// top right curvecontextHeart.bezierCurveTo(x + width / 2, y,x, y,x, y + topCurveHeight)contextHeart.closePath()contextHeart.fillStyle = colorFillcontextHeart.fill()contextHeart.restore()}}/*** 输出随机 1 或 -1* @returns {number}*/
function randomDirection(){let random = Math.random()if (random > 0.5){return 1} else {return -1}
}/*** 生成随机整数* @param min* @param max* @returns {number}*/
function randomInt(min, max){return Number((Math.random() * (max - min) + min).toFixed(0))
}/*** 生成随机整数* @param min* @param max* @returns {number}*/
function randomFloat(min, max){return Number(Math.random() * (max - min) + min)
}

Vue可通过以下方式导入,代码在文末可下载:

import {HeartCanvas} from "animate-heart-canvas"export default {mounted() {this.height = innerHeightthis.animateHeartCanvas = new AnimateHeartCanvas()},beforeDestroy() {this.animateHeartCanvas.destroy()}
}

API

  • @param hMin 颜色 h 最小值
  • @param hMax 颜色 h 最大值
  • @param countHeart 心的数量
  • @param sizeMin 心形最小值
  • @param sizeMax 心形最大值
  • @param bgColor 背景颜色

let HeartCanvas = new HeartCanvas(hMin, hMax, countHeart, sizeMin, sizeMax, bgColor)
// hMin hMax 对应 hue 的颜色值
// 什么参数都不写就是红色

let 五颜六色 = new HeartCanvas(0, 360) // 这个就是五颜六色的

// 其它操作
HeartCanvas.play() // 心动起来
HeartCanvas.stop() // 心不动
HeartCanvas.moveUp() // 心向上走
HeartCanvas.moveDown() // 心向下走

点击免费下载源码

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...