1. 效果圖
2.完整代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}canvas {display: block;}</style><title>文本粒子動畫</title>
</head><body><canvas id="textCanvas"></canvas><script>const canvas = document.getElementById('textCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const particles = [];const fontSize = 100;const text = '果粒橙汁兒up好膩害'; // 這里更改粒子文案ctx.font = `${fontSize}px Arial`;ctx.fillStyle = 'black';ctx.textAlign = 'center';ctx.fillText(text, canvas.width / 2, canvas.height / 2);const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);class Particle {constructor(x, y) {this.type = 'default'; // 定義粒子類型 分'image'和'default'this.x = x;this.y = y;if (this.type === 'image') {this.size = 10; // 調整粒子大小} else {this.size = 2; // 調整粒子大小}this.baseX = this.x;this.baseY = this.y;this.density = (Math.random() * 30) + 1;this.image = new Image();this.image.src = './heart.jpeg'; // 使用自定義的圖像 路徑寫自己存放圖片的途徑和圖片名字}draw() {if (this.type === 'image') {ctx.drawImage(this.image, this.x - this.size / 2, this.y - this.size / 2, this.size, this.size);} else {// 繪制其他類型的粒子ctx.fillStyle = 'black'; // 這里更改粒子顏色// ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}`; // 隨機彩色粒子ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.closePath();ctx.fill();}}update() {let dx = mouse.x - this.x;let dy = mouse.y - this.y;let distance = Math.sqrt(dx * dx + dy * dy);let forceDirectionX = dx / distance;let forceDirectionY = dy / distance;let maxDistance = mouse.radius;let force = (maxDistance - distance) / maxDistance;let directionX = forceDirectionX * force * this.density;let directionY = forceDirectionY * force * this.density;if (distance < mouse.radius) {this.x -= directionX;this.y -= directionY;} else {if (this.x !== this.baseX) {let dx = this.x - this.baseX;this.x -= dx / 5;}if (this.y !== this.baseY) {let dy = this.y - this.baseY;this.y -= dy / 5;}}}}let mouse = {x: null,y: null,radius: 150};window.addEventListener('mousemove', function (event) {mouse.x = event.x;mouse.y = event.y;});function init() {for (let y = 0, y2 = imageData.height; y < y2; y += 4) {for (let x = 0, x2 = imageData.width; x < x2; x += 4) {if (imageData.data[(y * 4 * imageData.width) + (x * 4) + 3] > 128) {let positionX = x;let positionY = y;particles.push(new Particle(positionX, positionY));}}}}function animate() {requestAnimationFrame(animate);ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {particles[i].draw();particles[i].update();}}init();animate();</script>
</body></html>
代碼出來的效果是黑色的，如果想要示例圖那種愛心粒子，可以將type改成image，并且改變圖片路徑this.image.src，如果想要改變文案則改變text變量，如果要改變粒子顏色則改變ctx.fillStyle即可~
本案例使用的圖片素材放在文章里啦，自取
)
)
![dimp導入提示 [警告]該工具不能解析此文件，請使用更高版本的工具](http://pic.xiahunao.cn/dimp導入提示 [警告]該工具不能解析此文件，請使用更高版本的工具)
