HTML5canvas爱心表白动画_html5爱心表白动画资源-CSDN文库

共8个文件

js：6个

html：1个

bak：1个

版权申诉

html

javascript

html5

5星 · 超过95%的资源 175 浏览量 2022-01-24 15:59:32 上传评论收藏 139KB ZIP 举报

HTML5 Canvas是一个强大的Web绘图接口，允许开发者在网页上直接绘制图形，为网页添加丰富的动态视觉效果。在这个“HTML5 Canvas爱心表白动画”项目中，我们主要涉及到HTML、CSS、JavaScript这三种核心技术，以及HTML5的新特性Canvas。 HTML（HyperText Markup Language）是网页内容的基础结构，用于定义页面的布局和元素。在这个项目中，HTML文件可能包含了canvas元素，它是HTML5新增的标签，专门用于在网页上进行图形绘制。`<canvas>`元素本身不显示任何内容，但可以通过JavaScript来操作其上下文（canvas.getContext('2d')），实现图形的绘制。 CSS（Cascading Style Sheets）用于控制网页的样式和布局。在爱心表白动画中，CSS可能被用来设置背景色、元素的位置、动画过渡效果等。例如，可以使用CSS3的keyframes规则创建复杂的动画效果，通过`@keyframes`定义动画的不同阶段，然后应用到目标元素上。 JavaScript是一种脚本语言，它使得网页具有交互性。在这个项目中，JavaScript主要负责处理动画逻辑，包括爱心的生成、移动、消失等。通过定时器（如setInterval或requestAnimationFrame）来控制动画的每一帧，更新canvas画布上的内容，实现动态效果。此外，JavaScript还可以处理用户交互，比如点击按钮启动动画。 HTML5 Canvas提供了丰富的绘图方法，如fillRect（填充矩形）、beginPath（开始路径）、moveTo（移动到）、lineTo（画线到）、arc（画圆弧）等。在这个表白动画中，爱心通常会用到arc方法来绘制心形的两个半圆和一条直线连接。通过调整坐标和参数，可以创造出各种形状和大小的爱心。同时，为了使动画更加生动，可能还会利用Canvas的透明度控制（globalAlpha属性）、渐变（createLinearGradient或createRadialGradient方法）和阴影（shadowColor、shadowBlur、shadowOffsetX和shadowOffsetY属性）等特性，为爱心添加阴影、渐变效果，提升视觉体验。总结来说，"HTML5 Canvas爱心表白动画"项目是一个综合运用HTML、CSS和JavaScript技术的实例，通过HTML5 Canvas的图形绘制功能，结合CSS的动画效果和JavaScript的动态控制，实现了一种浪漫且互动的表白场景。这个项目不仅展示了HTML5的创新特性，也体现了前端开发中艺术与技术的完美融合。

资源详情

资源评论

资源推荐

收起资源包目录

HTML5 canvas爱心表白动画.zip （8个子文件）

HTML5 canvas爱心表白动画

index.html 11KB

Projector.js 20KB

CanvasRenderer.js 24KB

helvetiker_regular.typeface.js 62KB

tween.min.js 5KB

nb.js 410KB

Sparks.js 17KB

index.html.bak 11KB

<!DOCTYPE html> <html lang="en"> <head> <title>小瑞</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <script src="js/nb.js"></script> <script src="js/Projector.js"></script> <script src="js/CanvasRenderer.js"></script> <script src="js/tween.min.js"></script> <script src="js/Sparks.js"></script>  <script src="js/helvetiker_regular.typeface.js"></script> <script> var container; var camera, scene, renderer; var group, text, plane; var targetRotation = 0; var targetRotationOnMouseDown = 0; var mouseX = 0; var mouseXOnMouseDown = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var heartShape, particleCloud, sparksEmitter, emitterPos; var _rotation = 0; var timeOnShapePath = 0; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); //相机 camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 150, 800); //场景 scene = new THREE.Scene(); group = new THREE.Group(); scene.add(group); // Get text from hash var string = "Hello XiaoXiao"; var hash = document.location.hash.substr(1); if (hash.length !== 0) { string = hash; } var text3d = new THREE.TextGeometry(string, { size: 80, height: 20, curveSegments: 2, font: "helvetiker" }); text3d.computeBoundingBox(); var centerOffset = -0.5 * (text3d.boundingBox.max.x - text3d.boundingBox.min.x); var textMaterial = new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff, overdraw: 0.5}); text = new THREE.Mesh(text3d, textMaterial); // Potentially, we can extract the vertices or faces of the text to generate particles too. // Geo > Vertices > Position text.position.x = centerOffset; text.position.y = 100; text.position.z = 0; text.rotation.x = 0; text.rotation.y = Math.PI * 2; group.add(text); particleCloud = new THREE.Object3D(); // Just a group particleCloud.y = 800; group.add(particleCloud); // Create Particle Systems // Heart var x = 0, y = 0; heartShape = new THREE.Shape(); heartShape.moveTo(x + 25, y + 25); heartShape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y); heartShape.bezierCurveTo(x - 30, y, x - 30, y + 35, x - 30, y + 35); heartShape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95); heartShape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35); heartShape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y); heartShape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25); var hue = 0; var hearts = function(context) { context.globalAlpha = 0.5; var x = 0, y = 0; context.scale(0.05, -0.05); // Scale so canvas render can redraw within bounds context.beginPath(); // From http://blog.burlock.org/html5/130-paths context.bezierCurveTo(x + 2.5, y + 2.5, x + 2.0, y, x, y); context.bezierCurveTo(x - 3.0, y, x - 3.0, y + 3.5, x - 3.0, y + 3.5); context.bezierCurveTo(x - 3.0, y + 5.5, x - 1.0, y + 7.7, x + 2.5, y + 9.5); context.bezierCurveTo(x + 6.0, y + 7.7, x + 8.0, y + 5.5, x + 8.0, y + 3.5); context.bezierCurveTo(x + 8.0, y + 3.5, x + 8.0, y, x + 5.0, y); context.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5); context.fill(); context.lineWidth = 0.5; //0.05 context.stroke(); } var setTargetParticle = function() { var material = new THREE.SpriteCanvasMaterial({ program: hearts }); material.color.setHSL(hue, 1, 0.75); hue += 0.001; if (hue > 1) hue -= 1; particle = new THREE.Sprite(material); particle.scale.x = particle.scale.y = Math.random() * 40 + 40; particleCloud.add(particle); return particle; }; var onParticleCreated = function(p) { p.target.position.copy(p.position); }; var onParticleDead = function(particle) { particle.target.visible = false; particleCloud.remove(particle.target); }; sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160)); emitterpos = new THREE.Vector3(); sparksEmitter.addInitializer(new SPARKS.Position(new SPARKS.PointZone(emitterpos))); sparksEmitter.addInitializer(new SPARKS.Lifetime(0, 2)); sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle)); sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0, -50, 10)))); // TOTRY Set velocity to move away from centroid sparksEmitter.addAction(new SPARKS.Age()); //sparksEmitter.addAction(new SPARKS.Accelerate(0.2)); sparksEmitter.addAction(new SPARKS.Move()); sparksEmitter.addAction(new SPARKS.RandomDrift(50, 50, 2000)); sparksEmitter.addCallback("created", onParticleCreated); sparksEmitter.addCallback("dead", onParticleDead); sparksEmitter.addCallback("updated", function(particle) { particle.target.position.copy(particle.position); }); sparksEmitter.start(); // End Particles renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); // window.addEventListener('resize', onWindowResize,