HTML5Canvas实现夜幕下连绵起伏的山脉和流星雨动画场景特效源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

122 浏览量 2022-11-03 23:37:24 上传评论收藏 2KB ZIP 举报

HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上绘制动态、交互式的2D图形。这个源码项目"HTML5 Canvas实现夜幕下连绵起伏的山脉和流星雨动画场景特效"是利用Canvas API创建的一个生动的视觉效果，旨在为用户带来沉浸式的浏览体验。在Canvas中，开发者可以通过JavaScript来操纵像素，绘制线条、形状、图像等。在这个项目中，我们可以推测主要涉及到以下几个关键知识点： 1. **画布元素**：HTML5 `<canvas>` 标签用于在网页上创建可编程的图形区域。这个元素本身不包含任何可见内容，需要通过JavaScript来填充内容。 2. **Context对象**：Canvas API提供了一个2D渲染上下文（`context2d`），它是进行图形绘制的主要接口。通过调用`canvas.getContext('2d')`可以获得这个对象。 3. **绘图方法**：2D渲染上下文提供了丰富的绘图方法，如`fillRect()`（填充矩形）、`strokeRect()`（描边矩形）、`beginPath()`（开始路径）、`moveTo()`（移动到）、`lineTo()`（画线到）等，这些方法用于绘制山脉、流星等元素。 4. **动画原理**：为了实现动态效果，开发者需要使用定时器（如`requestAnimationFrame()`）来定期更新画面。每次更新时，根据时间差调整元素的位置、颜色等属性，从而产生运动感。 5. **曲线绘制**：在描绘山脉时，可能使用了`bezierCurveTo()`或`quadraticCurveTo()`方法，这些方法可以绘制平滑的曲线，模拟山脉的起伏形态。 6. **图像处理**：如果背景包含星空或月亮等图片，可能用到了`drawImage()`方法将图像绘制到Canvas上，并可能使用`clip()`或`mask`来剪裁图像，以适应场景。 7. **颜色与渐变**：Canvas API支持线性渐变和径向渐变，可以用来创建色彩过渡的效果，比如夜空的深浅变化。 8. **事件监听**：为了增加交互性，可能添加了鼠标或触摸事件监听，比如当用户点击时触发流星雨的增加。 9. **性能优化**：为了避免过度绘制和提高帧率，开发者可能会使用`clearRect()`清除指定区域，而不是每次都重绘整个画布。 10. **流星动画**：流星的实现可能涉及随机生成起点、方向、速度和长度，以及随着时间衰减亮度和长度，直至消失。这个源码项目展示了HTML5 Canvas在实现复杂动画场景方面的潜力，对于想要学习Canvas和JavaScript动画的开发者来说，是一个很好的学习资源。通过深入研究和拆解代码，可以掌握更多Canvas绘图技巧和动画实现方法。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 Canvas实现夜幕下连绵起伏的山脉和流星雨动画场景特效源码.zip （1个子文件）

132689863475352419

index.html 6KB

<!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>HTML5 Canvas 夜幕下连绵起伏的山脉和流星雨动画</title> <style> body, html { background-color: #000; color: #fff; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="bgCanvas"></canvas> <script> (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); // Terrain stuff. var background = document.getElementById("bgCanvas"), bgCtx = background.getContext("2d"), width = window.innerWidth, height = document.body.offsetHeight; (height < 400) ? height = 400: height; background.width = width; background.height = height; function Terrain(options) { options = options || {}; this.terrain = document.createElement("canvas"); this.terCtx = this.terrain.getContext("2d"); this.scrollDelay = options.scrollDelay || 90; this.lastScroll = new Date().getTime(); this.terrain.width = width; this.terrain.height = height; this.fillStyle = options.fillStyle || "#191D4C"; this.mHeight = options.mHeight || height; // generate this.points = []; var displacement = options.displacement || 140, power = Math.pow(2, Math.ceil(Math.log(width) / (Math.log(2)))); // set the start height and end height for the terrain this.points[0] = this.mHeight; //(this.mHeight - (Math.random() * this.mHeight / 2)) - displacement; this.points[power] = this.points[0]; // create the rest of the points for (var i = 1; i < power; i *= 2) { for (var j = (power / i) / 2; j < power; j += power / i) { this.points[j] = ((this.points[j - (power / i) / 2] + this.points[j + (power / i) / 2]) / 2) + Math.floor(Math.random() * -displacement + displacement); } displacement *= 0.6; } document.body.appendChild(this.terrain); } Terrain.prototype.update = function() { // draw the terrain this.terCtx.clearRect(0, 0, width, height); this.terCtx.fillStyle = this.fillStyle; if (new Date().getTime() > this.lastScroll + this.scrollDelay) { this.lastScroll = new Date().getTime(); this.points.push(this.points.shift()); } this.terCtx.beginPath(); for (var i = 0; i <= width; i++) { if (i === 0) { this.terCtx.moveTo(0, this.points[0]); } else if (this.points[i] !== undefined) { this.terCtx.lineTo(i, this.points[i]); } } this.terCtx.lineTo(width, this.terrain.height); this.terCtx.lineTo(0, this.terrain.height); this.terCtx.lineTo(0, this.points[0]); this.terCtx.fill(); } // Second canvas used for the stars bgCtx.fillStyle = '#05004c'; bgCtx.fillRect(0, 0, width, height); // stars function Star(options) { this.size = Math.random() * 2; this.speed = Math.random() * .05; this.x = options.x; this.y = options.y; } Star.prototype.reset = function() { this.size = Math.random() * 2; this.speed = Math.random() * .05; this.x = width; this.y = Math.random() * height; } Star.prototype.update = function() { this.x -= this.speed; if (this.x < 0) { this.reset(); } else { bgCtx.fillRect(this.x, this.y, this.size, this.size); } } function ShootingStar() { this.reset(); } ShootingStar.prototype.reset = function() { this.x = Math.random() * width; this.y = 0; this.len = (Math.random() * 80) + 10; this.speed = (Math.random() * 10) + 6; this.size = (Math.random() * 1) + 0.1; // this is used so the shooting stars arent constant this.waitTime = new Date().getTime() + (Math.random() * 3000) + 500; this.active = false; } ShootingStar.prototype.update = function() { if (this.active) { this.x -= this.speed; this.y += this.speed; if (this.x < 0 || this.y >= height) { this.reset(); } else { bgCtx.lineWidth = this.size; bgCtx.beginPath(); bgCtx.moveTo(this.x, this.y); bgCtx.lineTo(this.x + this.len, this.y - this.len); bgCtx.stroke(); } } else { if (this.waitTime < new Date().getTime()) { this.active = true; } } } var entities = []; // init the stars for (var i = 0; i < height; i++) { entities.push(new Star({ x: Math.random() * width, y: Math.random() * height })); } // Add 2 shooting stars that just cycle. entities.push(new ShootingStar()); entities.push(new ShootingStar()); entities.push(new Terrain({ mHeight: (height / 2) - 120 })); entities.push(new Terrain({ displacement: 120, scrollDelay: 50, fillStyle: "rgb(17,20,40)", mHeight: (height / 2) - 60 })); entities.push(new Terrain({ displacement: 100, scrollDelay: 20, fillStyle: "rgb(10,10,5)", mHeight: height / 2 })); //animate background function animate() { bgCtx.fillStyle = '#110E19'; bgCtx.fillRect(0, 0, width, height); bgCtx.fillStyle = '#ffffff'; bgCtx.strokeStyle = '#ffffff'; var entLen = entities.length; while (entLen--) { entities[entLen].update(); } requestAnimationFrame(animate); } animate(); </script> </body> </html>

评论收藏

内容反馈

版权申诉