<template> <div style="position: relative;width: 100%;height: 100%"> <div style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;"> <span :style="{color:textColor}"> {{text}} </span> </div> <div style="position: absolute;height: 100%;width: 100%;top: 0;left: 0"> <ButtonGroup style="left: 4px;top: 4px"> <Button @click="drawerValue = true" icon="ios-color-palette-outline" ></Button> </ButtonGroup> <canvas id="pinkboard" style="position: relative" ref="pinkboard" @click="changeText"></canvas> </div> </div> <Drawer title="设置" placement="top" :closable="false" v-model="drawerValue"> <Space direction="vertical" size="large"> <Space> 文字: <Input prefix="ios-contact" v-model="text" placeholder="请输入文字" style="width: auto" /> <ColorPicker v-model="textColor" alpha transfer :colors="defaultTextColors"/> </Space> <Space> 心形图: <ColorPicker v-model="heartColor" alpha transfer :colors="defaultHeartColors"/> </Space> </Space> </Drawer> </template> <script setup> import {onMounted, ref, watch} from 'vue' const text=ref('L ❤ G') const textColor=ref('#ea80b0') const defaultTextColors=ref( ['#ea80b0','#2D8CF0', '#FF9900', '#19C919', '#9B1DEA', '#EA4CA3']) const defaultHeartColors=ref( ['#ea80b0','#2D8CF0', '#FF9900', '#19C919', '#9B1DEA', '#EA4CA3']) const drawerValue=ref(false) const heartColor=ref('#ea80b0') const pinkboard=ref(null) let canvasEl onMounted(() => { // canvasEl=document.getElementById('pinkboard') canvasEl=pinkboard.value puttingItAll(canvasEl) }) watch(heartColor,()=>{ puttingItAll(canvasEl,heartColor) }) function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; } const textArr=['L ❤ G','老婆大人最漂亮了','小仙女从来不生气','那个化妆品,买了','这是这个月的工资'] let randomOld=0 function changeText(){ let random=getRndInteger(0,textArr.length-1) if(random==randomOld && random==textArr.length-1){ random=random-1 }else if(random==randomOld){ random=random+1 } randomOld=random text.value=textArr[random] } /* * Settings */ var settings = { particles: { length: 500, // maximum amount of particles duration: 2, // particle duration in sec velocity: 100, // particle velocity in pixels/sec effect: -0.75, // play with this for a nice effect size: 30, // particle size in pixels }, }; /* * RequestAnimationFrame polyfill by Erik Möller */ (function () { var b = 0 var c = ['ms', 'moz', 'webkit', 'o'] for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + 'RequestAnimationFrame'] window.cancelAnimationFrame = window[c[a] + 'CancelAnimationFrame'] || window[c[a] + 'CancelRequestAnimationFrame'] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime() var f = Math.max(0, 16 - (d - b)) var g = window.setTimeout(function () { h(d + f) }, f) b = d + f return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }()) /* * Point class */ var Point = (function () { function Point(x, y) { this.x = (typeof x !== 'undefined') ? x : 0 this.y = (typeof y !== 'undefined') ? y : 0 } Point.prototype.clone = function () { return new Point(this.x, this.y) } Point.prototype.length = function (length) { if (typeof length == 'undefined') return Math.sqrt(this.x * this.x + this.y * this.y) this.normalize() this.x *= length this.y *= length return this } Point.prototype.normalize = function () { var length = this.length() this.x /= length this.y /= length return this } return Point })() /* * Particle class */ var Particle = (function () { function Particle() { this.position = new Point() this.velocity = new Point() this.acceleration = new Point() this.age = 0 } Particle.prototype.initialize = function (x, y, dx, dy) { this.position.x = x this.position.y = y this.velocity.x = dx this.velocity.y = dy this.acceleration.x = dx * settings.particles.effect this.acceleration.y = dy * settings.particles.effect this.age = 0 } Particle.prototype.update = function (deltaTime) { this.position.x += this.velocity.x * deltaTime this.position.y += this.velocity.y * deltaTime this.velocity.x += this.acceleration.x * deltaTime this.velocity.y += this.acceleration.y * deltaTime this.age += deltaTime } Particle.prototype.draw = function (context, image) { function ease(t) { return (--t) * t * t + 1 } var size = image.width * ease(this.age / settings.particles.duration) context.globalAlpha = 1 - this.age / settings.particles.duration context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size) } return Particle })() /* * ParticlePool class */ var ParticlePool = (function () { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration function ParticlePool(length) { // create and populate particle pool particles = new Array(length) for (var i = 0; i < particles.length; i++) particles[i] = new Particle() } ParticlePool.prototype.add = function (x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy) // handle circular queue firstFree++ if (firstFree == particles.length) firstFree = 0 if (firstActive == firstFree) firstActive++ if (firstActive == particles.length) firstActive = 0 } ParticlePool.prototype.update = function (deltaTime) { let i // update active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime) } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime) for (i = 0; i < firstFree; i++) particles[i].update(deltaTime) } // remove inactive particles while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++ if (firstActive == particles.length) firstActive = 0 } } ParticlePool.prototype.draw = function (context, image) { let i // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image) } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image) for (i = 0; i < firstFree; i++) particles[i].draw(context, image) } } return ParticlePool })(); /* * Putting it all together */ function puttingItAll(canvas,heartColor){ var context = canvas.getContext('2d'), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time // get point on heart with -PI <= t <= PI function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25 ) } // creating the particle image using a dummy canvas var image = (function () { var canvas = document.createElement('canvas'), context = canvas.getContext('2d') canvas.width = settings.particles.size canvas.height = settings.particles.size // helper function to create the path function to(t) { var point = pointOnHeart(t) point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350 point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350 return point } // create the path context.beginPath() var t = -Math.PI var point = to(t) context.moveTo(point.x, point.y) while (t < Math.PI) { t += 0.01 // baby steps! point = to(t) context.lineTo(point.x, point.y) } context.closePath() // create the fill context.fillStyle =heartColor? heartColor.value:'#ea80b0' context.fill() // create the image var image = new Image() image.src = canvas.toDataURL() return image })() // render that thing! function render() { // next animation frame requestAnimationFrame(render) // update time var newTime = new Date().getTime() / 1000, deltaTime = newTime - (time || newTime) time = newTime // clear canvas context.clearRect(0, 0, canvas.width, canvas.height) // create new particles var amount = particleRate * deltaTime for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random()) var dir = pos.clone().length(settings.particles.velocity) particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y) } // update and draw particles particles.update(deltaTime) particles.draw(context, image) } // handle (re-)sizing of the canvas function onResize() { canvas.width = canvas.clientWidth canvas.height = canvas.clientHeight } window.onresize = onResize // delay rendering bootstrap setTimeout(function () { onResize() render() }, 10) } </script> <style scoped> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } </style>