<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星空</title> <style> body { margin: 0; padding: 0; overflow: hidden; background: #000; } canvas { display: block; background: #000; } </style> </head> <body> <canvas id="canvas"></canvas> <script> function initializeCanvas(elemid) { let canvas = document.getElementById(elemid); let context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; createStars(context, canvas.width, canvas.height); return { context: context, canvas: canvas }; } function createStars(context, width, height) { const stars = 500; for (let i = 0; i < stars; i++) { const x = Math.random() * width; const y = Math.random() * height; const radius = Math.random() * 2; context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2, false); context.fillStyle = 'white'; context.fill(); } } class Segment { constructor(parent, length, angle, isFirst) { this.position = isFirst ? { x: parent.x, y: parent.y } : { x: parent.nextPosition.x, y: parent.nextPosition.y }; this.length = length; this.angle = angle; this.nextPosition = { x: this.position.x + length * Math.cos(this.angle), y: this.position.y + length * Math.sin(this.angle) }; } // ... 其他方法 } class Tentacle { constructor(x, y, length, segments, angle) { this.x = x; this.y = y; this.length = length; this.segments = segments; // ... 初始化触手的每一段 } updatePosition(lastTarget, target) { // ... 更新触手的位置 } drawSegments(target) { // ... 绘制触手的每一段 } drawBase(target) { // ... 绘制触手的基部 } } canvas.addEventListener("mousemove", function(e) { mouse.x = e.pageX - this.offsetLeft; m

时间: 2025-04-01 19:04:55 浏览: 89

### 动态星空效果的实现 HTML5 Canvas 提供了一个灵活且功能丰富的绘图接口，可以用来创建各种视觉效果。以下是通过 HTML5 Canvas 绘制动态星空效果的一个简单示例： ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function drawStar(x, y, radius, spikes) { let rot = Math.PI / 2 * 3; const step = Math.PI / spikes; ctx.beginPath(); ctx.moveTo(x, y - radius); for (let i = 0; i < spikes; i++) { x += Math.cos(rot) * radius; y += Math.sin(rot) * radius; ctx.lineTo(x, y); rot += step; x += Math.cos(rot) * radius * 0.5; y += Math.sin(rot) * radius * 0.5; ctx.lineTo(x, y); rot += step; } ctx.closePath(); } function animateStars() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 随机生成星星 for (let i = 0; i < 100; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const size = Math.random() * 2 + 1; const spikes = Math.floor(Math.random() * 5) + 4; ctx.fillStyle = 'white'; drawStar(x, y, size, spikes); } requestAnimationFrame(animateStars); } animateStars(); ``` 上述代码展示了如何使用 `CanvasRenderingContext2D` 的方法来绘制随机分布的星星，并通过 `requestAnimationFrame()` 实现动画效果[^1]。 --- ### 触手动画的实现触手动画可以通过贝塞尔曲线（Bezier Curves）和路径操作来模拟柔韧的效果。以下是一个简单的触手动画示例： ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Tentacle { constructor(startX, startY, length, segments) { this.startX = startX; this.startY = startY; this.length = length; this.segments = []; for (let i = 0; i < segments; i++) { this.segments.push({ angle: Math.random() * Math.PI, distance: Math.random() * length / segments }); } } update() { for (let segment of this.segments) { segment.angle += (Math.random() - 0.5) * 0.1; } } draw() { ctx.strokeStyle = '#ff7f50'; // 橙红色 ctx.lineWidth = 8; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(this.startX, this.startY); let currentX = this.startX; let currentY = this.startY; for (let segment of this.segments) { const dx = Math.cos(segment.angle) * segment.distance; const dy = Math.sin(segment.angle) * segment.distance; currentX += dx; currentY += dy; ctx.quadraticCurveTo(currentX, currentY, currentX, currentY); } ctx.stroke(); } } const tentacles = []; for (let i = 0; i < 5; i++) { tentacles.push(new Tentacle(canvas.width / 2, canvas.height, 200, 10)); } function animateTentacles() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let tentacle of tentacles) { tentacle.update(); tentacle.draw(); } requestAnimationFrame(animateTentacles); } animateTentacles(); ``` 此代码片段定义了一种基于分段角度变化的触手类，并通过更新每一段的角度实现了波浪式的运动效果。 --- ### 总结以上两个例子分别展示了如何利用 HTML5 Canvas 创建动态星空和触手动画。这些技术的核心在于理解 Canvas API 中的路径绘制、变换矩阵以及帧刷新机制。对于更复杂的应用场景，还可以结合 NanoVG-RS 进行高性能矢量图形渲染。

阅读全文

相关推荐

基于html的星空跳跃者游戏制作 （代码+游戏操作简介）使用HTML、CSS和JavaScript实现

html5 canvas全屏的星空背景动画特效

520表白HTML5爱心代码及应用方法.zip

canvas动画-星空效果动画

HTML5 Canvas星空黑洞动画效果

HTML纯JS炫酷星空背景效果

javascript经典特效---按时间不同显示图片.rar

html星空

HTML星空动画特效

html星空代码复制

html浪漫星空相册

HTML5 流星+星空背景网页端【年会/婚礼】抽奖源码，打开导入名单即可使用，效果酷炫，调色即可温馨！

html星空渐变背景色

动态宇宙星空代码html

html动态背景特效星空

html爱心代码浪漫星空

浪漫的html星空源代码

帮我写一个html星空页面

利用html和js生产一个星空背景，一颗行星，行星被行星环包裹着的html页面

写一个酷炫星空登录页html

大家在看

51单片机ADC0832的Proteus仿真.zip

Android openssl 全平台.a文件

B50610-DS07-RDS(博通千兆以太网手册) - 副本.pdf

STM32H743驱动SDRAM读写（W9825G6KH）【支持STM32H7系列单片机_寄存器库驱动】.zip

Winform程序使用验证码

最新推荐

使用3D引擎threeJS实现星空粒子移动效果

《门户网站对比》.ppt

langchain4j-community-xinference-spring-boot-starter-1.0.0-beta2.jar中文文档.zip

中职计算机教学大纲(1).docx

C++实现的DecompressLibrary库解压缩GZ文件

【数据融合技术】：甘肃土壤类型空间分析中的专业性应用

VM ware如何查看软件版本信息

数据库课程设计报告：常用数据库综述

【空间分布规律】：甘肃土壤类型与农业生产的关联性研究

在halcon中，卡尺测量和二维测量谁的精度高

基于html的星空跳跃者游戏制作（代码+游戏操作简介）使用HTML、CSS和JavaScript实现