利用html5-canvas及javascript产生三维星空效果的代码

最新推荐文章于 2023-11-07 22:54:55 发布
最新推荐文章于 2023-11-07 22:54:55 发布
阅读量8k 收藏 5
点赞数 3
分类专栏： html5

从网上搜集到的一段利用纯html5-canvas以及javascript生成三维星空效果的代码。代码的核心部分是“<script></script>”标签中包含的外部javascript代码-html5_3d_animation.js，即本文的第二段代码。代码的思想很简单：赋予每颗星星随机的x,y,z三个（三维）坐标，分别代表他们在星空（canvas）中的横坐标位置，纵坐标位置以及在三维空间中的尺度信息。利用canvas将每颗星星画在画布上。然后利用javascript中全局变量即局部变量的特点来计算星星的下一个位置信息，重绘。。。只需一些简单的修改，就可令代码产生不同的效果！

[javascript] view plain copy
  1. <html>  
  2. <head>  
  3. <title>Simple 3D on HTML5 canvas</title>  
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>  
  6. <script type="text/javascript" src="html5_3d_animation.js"></script>  
  7. <script language="javascript" type="text/javascript">  
  8.     $(function() {  
  9.         $("#html5_3d_animation").html5_3d_animation({  
  10.             window_width: '600',  
  11.             window_height: '300',  
  12.             window_background: '#00113F',  
  13.             star_count: '1000',  
  14.             star_color: '#FBFFAF',  
  15.             star_depth: '100'  
  16.         });  
  17.     });      
  18. </script>  
  19. </head>  
  20. <body>  
  21. <div class="wrap">  
  22.   <canvas id="html5_3d_animation">Internet Explorer Not  
  23.     Supported</canvas>  
  24.   <div id="show"></div>  
  25. </div>  
  26.   
  27. <div style="width:98%;margin:20px auto; padding:50px 0; clear:both; overflow:hidden;">  
  28. </body>  
  29. </html>  

html5_3d_animation.js

[javascript] view plain copy
  1. (function(a){  
  2.     a.fn.html5_3d_animation=function(p){  
  3.         var p=p||{};  
  4.   
  5.         var w_w=p&&p.window_width?p.window_width:"500";  
  6.         var w_h=p&&p.window_height?p.window_height:"400";  
  7.         var w_b=p&&p.window_background?p.window_background:"#000";  
  8.         var s_c=p&&p.star_count?p.star_count:"600";  
  9.         var s_color=p&&p.star_color?p.star_color:"#FFF";  
  10.         var s_d=p&&p.star_depth?p.star_depth:"250";  
  11.         var dom=a(this);  
  12.         var fov = parseInt(s_d);  
  13.         var SCREEN_WIDTH = parseInt(w_w);  
  14.         var SCREEN_HEIGHT = parseInt(w_h);  
  15.         var HALF_WIDTH = SCREEN_WIDTH/2;  
  16.         var HALF_HEIGHT = SCREEN_HEIGHT/2;  
  17.         var c_id = dom.attr("id");  
  18.         var numPoints = s_c;  
  19.         dom.attr({ width: w_w, height: w_h});  
  20.         setup();  
  21.         function setup()  
  22.         {  
  23.             function draw3Din2D(point3d)  
  24.             {  
  25.                 x3d = point3d[0];  
  26.                 y3d = point3d[1];  
  27.                 z3d = point3d[2];  
  28.                 var scale = fov/(fov+z3d);  
  29.                 var x2d = (x3d * scale) + HALF_WIDTH;  
  30.                 var y2d = (y3d * scale)  + HALF_HEIGHT;  
  31.   
  32.                 c.lineWidth= scale;  
  33.                 c.strokeStyle = s_color;  
  34.                 c.beginPath();  
  35.                 c.moveTo(x2d,y2d);  
  36.                 c.lineTo(x2d+scale,y2d);  
  37.                 c.stroke();  
  38.             }  
  39.   
  40.             var canvas = document.getElementById(c_id);  
  41.             var c = canvas.getContext('2d');  
  42.             var points = [];  
  43.   
  44.             function initPoints()  
  45.             {  
  46.                 for (i=0; i<numPoints; i++)  
  47.                 {  
  48.                     point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];  
  49.                     points.push(point);  
  50.                 }  
  51.   
  52.             }  
  53.   
  54.             function render()  
  55.             {  
  56.                 c.fillStyle=w_b;  
  57.                 c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);  
  58.   
  59.                 for (i=0; i<numPoints; i++)  
  60.                 {  
  61.                     point3d = points[i];  
  62.   
  63.                     z3d = point3d[2];  
  64.                     z3d-=4;  
  65.                     if(z3d<-fov) z3d +=400;  
  66.                     point3d[2] = z3d;  
  67.   
  68.                     draw3Din2D(point3d);  
  69.   
  70.                 }  
  71.                 var show = document.getElementById('show');  
  72.                 show.appendChild('p');  
  73.             }  
  74.   
  75.             initPoints();  
  76.   
  77.             var loop = setInterval(function(){  
  78.                 render();  
  79.             }, 50);  
  80.   
  81.         }  
  82.        }  
  83. })(jQuery);  
black__zzc
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
星空特效代码
10-17
一段通过canvas渲染的星空特效代码，该代码可以做为炫酷的页面背景
html+css+js实现星空特效
热门推荐
weixin_44691513的博客
09-04 5万+
html+css+js实现星空特效 废话不多说直接上代码，效果是一个星空旋转和文字逐渐出现的效果，文字是逐渐出现的，星空中的小球是旋转的 效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
js使用canvas画五角星以及渐变色，瞎画
GongWei_的博客
12-01 556
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星云图</title> </head> <body> <canvas id="canvas" style="border: 1px solid black; margin: 20px auto;"></canvas> </body> &.
javascript五角星
weixin_47460937的博客
09-07 552
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五角星</title> <script> window.onload = function
一个很简短但很炫的html5代码（canvas画布）。。。。。
liu_chenglong的博客
01-28 1万+
最近在网上看到一个《一个很简短但很炫的html5代码》，特意收藏一下： [鼠标移入，酷炫样式] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:...
HTML5 Canvas宇宙星云动画特效特效代码
03-20
HTML5 Canvas宇宙星云动画特效是一个宇宙星云动画效果，基于jquery.js和HTML5 Canvas制作，屏幕上会产生很多大大小小的光点，色彩斑斓，酷似宇宙的星云图，并且，星云图还是运动的，非常好看的一款HTML5动画实例。
画星星js
Sunflower_knight的博客
05-26 590
代码 JavaScript部分 这次的代码直接从js开始，首先我们先写一个for循环，然后在for循环里面嵌套一个for循环在第二个for循环里面输出一个星星，然后在第一个for循环中输出一个换行，实现随着行数的增加每一行都会比上一行多一个五角星 <script> //三角形的---五角星----随着行数的增加,每一行都会比上一行多一个五角星 // 提示:document.write("★");换行: document.write("<br...
html5游戏制作raf,HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用...
weixin_36247910的博客
05-31 388
弧度与sin及cos的关系目的：通过理解弧度与sin及cos的关系，可以根据弧度及半径求出旋转指定弧度后所到达的dx,dy坐标弧度(angle)与角度(degree)的关系：360角度 = 2π1角度 = π/180弧度1弧度 = 180/π角度即：30角度的弧度值 = 30 * (π/180) ，30弧度的角度值 = 30 * (180/π)通过弧度与半径求旋转指定弧度后目标点的坐标：sin(a...
H5+javascript 动态绘制五角星
LMX的博客
02-25 1481
原理 手动画五角星感觉谁都会。 这不是有手就行，简简单单。可是用代码画图应该怎样做呢？ 其实也很简单在H5画布上无非就是找点，然后按一定的顺序连接这些点。那么问题来了点怎么找啊？ 给你整副图，一看就明白了。 懂了吧，这不就是圆上的五个点么，找出来不就行了。圆的方程高中生都张口就来(x-a)²+(y-b)²=r²。不过这好像没啥用因为我们想要坐标点。在稍微那么仔细一看，这不是将整个圆平分了5份吗。每个1/5弧对应的圆心角，这不是2π/5么。有了圆心角用极坐标求位置那不很nice。圆的极坐标公式：ρ²=x²
JavaScript实现绘制五角星（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 186
JavaScript实现绘制五角星（附完整源码）
使用C++绘制动态星空
10-02
使用C++语言利用graphics.h绘制动态星空，思路简单清晰，压缩文件中的原代码已经经过测试
HTML5全屏宇宙星空星系旋转canvas特效动画背景js效果
12-15
HTML5全屏宇宙星空星系旋转canvas特效动画背景js效果
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
10-22
主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
10-23
主要介绍了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码,使用了html5的canvas技术,可呈现出带有3D效果的玫瑰花渐显效果,非常逼真自然,需要的朋友可以参考下
Html5-Canvas-Material-Design:在 Material Design 中使用 Html5、javascript 构建的简单 Html5 Canvas
06-07
简单的 HTML5 画布特征换画笔更改油漆颜色更改轮廓颜色下载图片清晰的图像内置html5 Javascript css3 爱和饼干
JavaScript html5 canvas绘制时钟效果
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
MATLAB算法插值与拟合代码
04-15
MATLAB算法插值与拟合代码提取方式是百度网盘分享地址
基于二级计算机系统建立无取向硅钢轧制模型的研究
最新发布
04-15
随着计算机的发展及轧制自动化程度的提高，计算机控制系统在带钢热连轧生产线 中发挥着越来越重要的作用。硅钢作为钢中的艺术品，对轧制精度要求极高，传统的计 算机控制系统轧制模型并不能适应硅钢高精度轧制的生产要求，因此，开发设计精确的 轧制模型显得尤为重要。 本文以包钢CSP热连轧计算机控制系统为研究对象，针对原有轧制模型生产硅钢无 法达到成品厚度要求精度的问题，以新品种硅钢50SW800为研究对象，开发了适应性 较好的厚度精度控制轧制力模型与轧制力自学习模型，实际运行良好。主要工作及结论 如下： 通过分析大量硅钢轧制的重要工艺参数的变化规律，剔除温度、张力、摩擦力等影 响参数，主要针对带钢的变形抗力进行研究，采用微单元的塑性变形方程式，进行硅钢 变形抗力参数的计算，并利用在轧制时材料化学元素、变形率、温度、实际轧制压力、 理论轧制压力等数据通过多元线性回归得出新的轧制压力修正系数，最终成功构建了轧 制力模型，最终将该轧制力模型用于硅钢的轧制力设定预计算，首坯轧制偏差降低60%。
uAI - AI Assistant 1.3.7人工智能助手Unity插件unitypackage项目源码C#
04-15
uAI - AI Assistant 1.3.7人工智能助手Unity插件unitypackage项目源码C# 支持Unity版本2020.3.45或更高 uAI Assistant 是 Unity 的扩展，提供了一套强大的工具，由 OpenAI 最新的 GPT-4 Turbo 提供支持，具有 128k 上下文窗口、3.5 AI 模型以及 Dall-E 2 和 Dall-E 3。 uAI Assistant 中包含的 DemoScene 使用 Unity 包管理器中的 TextMeshPro 包作为 UI 文本。确保在导入此包之前导入它。 还要导入“TMP Essential Resources”，因为 DemoScene 使用“LiberationSans.ttf”字体。有关说明，请参阅文档。 uAI 助手？ uAI Assistant 是 Unity 游戏引擎的强大扩展，它使用 GPT AI 帮助游戏开发人员轻松创建专业代码和引人入胜的游戏内容。 您需要 OpenAI 密钥才能使用 uAI Assistant！请阅读我们的文档以获取更多说明。 让你的纹理变得无缝 使用 AI 创建
用 HTML5 的 canvas 元素和 JavaScript 实现烟花效果，包含代码部分
03-09
好的，我可以回答这个问题。以下是一个简单的 HTML5 canvas 和 JavaScript 实现烟花效果的示例代码： HTML 代码： ``` <canvas id="fireworks"></canvas> ``` JavaScript 代码： ``` var canvas = document.getElementById("fireworks"); var ctx = canvas.getContext("2d"); var particles = []; var numParticles = 100; var colors = ["#FF000", "#00FF00", "#000FF", "#FFFF00", "#00FFFF", "#FF00FF"]; function Particle(x, y, radius, color, vx, vy, ax, ay) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.vx = vx; this.vy = vy; this.ax = ax; this.ay = ay; } Particle.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, , 2 * Math.PI); ctx.fillStyle = this.color; ctx.fill(); } Particle.prototype.update = function() { this.vx += this.ax; this.vy += this.ay; this.x += this.vx; this.y += this.vy; this.radius -= .05; } function createParticles(x, y) { for (var i = ; i < numParticles; i++) { var radius = Math.random() * 5 + 2; var color = colors[Math.floor(Math.random() * colors.length)]; var angle = Math.random() * Math.PI * 2; var speed = Math.random() * 5 + 2; var vx = Math.cos(angle) * speed; var vy = Math.sin(angle) * speed; var ax = ; var ay = .1; particles.push(new Particle(x, y, radius, color, vx, vy, ax, ay)); } } function animate() { ctx.clearRect(, , canvas.width, canvas.height); for (var i = ; i < particles.length; i++) { particles[i].draw(); particles[i].update(); if (particles[i].radius <= ) { particles.splice(i, 1); } } requestAnimationFrame(animate); } canvas.addEventListener("click", function(event) { createParticles(event.clientX, event.clientY); }); animate(); ``` 这段代码创建了一个 canvas 元素，并在其中实现了一个烟花效果。当用户在 canvas 上点击时，会在点击位置创建一组粒子，这些粒子会以随机的颜色和速度向外扩散，并逐渐消失。这个效果通过创建一个 Particle 类来实现，每个粒子都是一个 Particle 的实例。在 animate 函数中，每个粒子都会被绘制和更新，同时过小的粒子会被从数组中删除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值