【免费】canvas实现满屏幕飘小爱心资源-CSDN文库

共4个文件

js：3个

html：1个

需积分: 0 192 浏览量更新于2024-02-13 收藏 37KB ZIP 举报

在本文中，我们将深入探讨如何使用HTML5的Canvas API来实现一个满屏飘动小爱心的特效，非常适合在情人节这样的特殊日子里展示浪漫氛围。这个效果是通过编程绘制图形并应用动画原理来实现的。我们需要在HTML文档中创建一个`<canvas>`元素，它是Canvas画布的核心。在`canvas.html`文件中，我们可以看到类似以下的代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>满屏飘小爱心</title> </head> <body> <canvas id="heartCanvas" width="100%" height="100%"></canvas> <script src="canvas_files/heart.js"></script> </body> </html> ``` 这里我们设置了Canvas的宽度和高度为100%，确保它能填满整个浏览器窗口。`heart.js`是我们的JavaScript脚本，将负责绘制和动画逻辑。接下来，让我们关注`heart.js`中的核心部分。我们需要获取Canvas的2D渲染上下文，这可以通过调用`canvas.getContext('2d')`实现。然后，定义一个`Heart`类，用于表示单个爱心，并包含其坐标、大小、速度等属性。代码可能如下： ```javascript class Heart { constructor(x, y, size, speed) { this.x = x; this.y = y; this.size = size; this.speed = speed; } draw(ctx) { // 绘制爱心形状 ctx.beginPath(); ctx.moveTo(this.x - this.size / 2, this.y - this.size); ctx.bezierCurveTo(this.x, this.y - this.size, this.x + this.size / 2, this.y - this.size, this.x + this.size, this.y); ctx.bezierCurveTo(this.x + this.size, this.y + this.size / 2, this.x, this.y + this.size, this.x - this.size / 2, this.y); ctx.closePath(); ctx.fillStyle = 'red'; ctx.fill(); } } ``` `draw`方法使用了Bezier曲线来绘制心形图案。接下来，我们需要创建一个`HeartPool`类，用于管理所有的爱心并更新它们的状态： ```javascript class HeartPool { constructor(numHearts) { this.hearts = []; for (let i = 0; i < numHearts; i++) { const heart = new Heart(Math.random() * window.innerWidth, -50, 10 + Math.random() * 20, 0.5 + Math.random() * 0.5); this.hearts.push(heart); } } update() { for (let heart of this.hearts) { heart.y += heart.speed; if (heart.y > window.innerHeight) { heart.y = -50; heart.x = Math.random() * window.innerWidth; } } } draw(ctx) { for (let heart of this.hearts) { heart.draw(ctx); } } } ``` `HeartPool`类初始化时会生成指定数量的爱心，每个爱心的位置和速度都是随机的。`update`方法负责每帧更新爱心的位置，当爱心超出屏幕底部时，将其重新放置到顶部。`draw`方法则遍历所有爱心并调用它们的`draw`方法。我们需要一个主循环来持续更新和绘制画面： ```javascript const canvas = document.getElementById('heartCanvas'); const ctx = canvas.getContext('2d'); const pool = new HeartPool(100); function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); pool.update(); pool.draw(ctx); } animate(); ``` `requestAnimationFrame`用于实现动画，它会在浏览器下一次重绘之前调用回调函数。我们在每一帧中清空画布，更新并绘制所有的爱心。通过这种方式，我们就成功地用Canvas实现了满屏飘动小爱心的特效。这个简单但浪漫的效果可以作为一个基础，进一步定制颜色、形状或添加更多交互元素，以适应不同的情境和需求。无论是在情人节还是其他特别的日子，这样的视觉呈现都能增添温馨的气氛。

收起资源包目录

canvas.zip （4个子文件）

canvas_files

canvas_bg.js 4KB

jquery-1.10.2.js 318B

jquery.min.js 91KB

canvas.html 889B

资源推荐

资源预览

资源评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>canvas</title> <style type="text/css"> /** { margin:0; padding:0; } body { width:100%; height:100%; overflow:hidden; } */ #main{ position: absolute; top: 200px; left: 35%; cursor: pointer; } #main:hover{ } </style> <script src="./canvas_files/jquery-1.10.2.js"></script><script src="./canvas_files/jquery.min.js"></script> <script type="text/javascript" src="./canvas_files/canvas_bg.js"></script> </head> <body style=""> <canvas id="c" style="position: absolute;z-index: -1;text-align: center;" width="1512" height="770"></canvas> <div id="main"><h1>你知道吗，等待是最长情的告白</h1></div> </body></html>