东莞专业做网站公司,wordpress 写接口,淘宝客推广,wordpress固定导航目录
写在前面
完整代码
代码分析
运行效果
系列文章
写在后面 写在前面
100行代码实现HTML星空特效。
完整代码
全部代码如下。
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8title星空特效/title
/headbody
/body
!-- Html代码 --
divcanvas idcanvas/canvascanvas idsnow/canvasdiv classam-g styleposition: fixed; bottom: 0px;div classam-u-sm-12div stylez-index: 9999 idplayer classaplayer/div/div/div
/div
!-- CSS代码 --
style typetext/csscanvas {position: fixed;width: 100%;height: 100%;z-index: -1;}
/style
script typetext/javascriptvar canvas document.getElementById(canvas),ctx canvas.getContext(2d),w canvas.width window.innerWidth,h canvas.height window.innerHeight,hue 217,stars [],count 0,maxStars 1300; //星星数量var canvas2 document.createElement(canvas),ctx2 canvas2.getContext(2d);canvas2.width 100;canvas2.height 100;var half canvas2.width / 2,gradient2 ctx2.createRadialGradient(half, half, 0, half, half, half);gradient2.addColorStop(0.025, #CCC);gradient2.addColorStop(0.1, hsl( hue , 61%, 33%));gradient2.addColorStop(0.25, hsl( hue , 64%, 6%));gradient2.addColorStop(1, transparent);ctx2.fillStyle gradient2;ctx2.beginPath();ctx2.arc(half, half, half, 0, Math.PI * 2);ctx2.fill();function random(min, max) {if (arguments.length 2) {max min;min 0;}if (min max) {var hold max;max min;min hold;}return Math.floor(Math.random() * (max - min 1)) min;}function maxOrbit(x, y) {var max Math.max(x, y),diameter Math.round(Math.sqrt(max * max max * max));return diameter / 2;//星星移动范围值越大范围越小}var Star function () {this.orbitRadius random(maxOrbit(w, h));this.radius random(60, this.orbitRadius) / 8;//星星大小this.orbitX w / 2;this.orbitY h / 2;this.timePassed random(0, maxStars);this.speed random(this.orbitRadius) / 50000;//星星移动速度this.alpha random(2, 10) / 10;count;stars[count] this;}Star.prototype.draw function () {var x Math.sin(this.timePassed) * this.orbitRadius this.orbitX,y Math.cos(this.timePassed) * this.orbitRadius this.orbitY,twinkle random(10);if (twinkle 1 this.alpha 0) {this.alpha - 0.05;} else if (twinkle 2 this.alpha 1) {this.alpha 0.05;}ctx.globalAlpha this.alpha;ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);this.timePassed this.speed;}for (var i 0; i maxStars; i) {new Star();}function animation() {ctx.globalCompositeOperation source-over;ctx.globalAlpha 0.5; //尾巴ctx.fillStyle hsla( hue , 64%, 6%, 2);ctx.fillRect(0, 0, w, h)ctx.globalCompositeOperation lighter;for (var i 1, l stars.length; i l; i) {stars[i].draw();canvas2.style.cssText display:none;};window.requestAnimationFrame(animation);}animation();
/script/html
代码分析
这段HTML和JavaScript代码创建了一个网页该网页展示了一个动态的星空效果其中星星在画布上随机闪烁并移动。
首先在HTML结构中有两个canvas元素被定义分别用于绘制星空背景和可能的其他效果如雪花以及一个用于放置音频播放器的div。canvas元素通过CSS设置为全屏覆盖并且位置固定这样它们可以作为背景层显示。
接下来是CSS样式它主要设置了canvas元素的样式包括位置、尺寸和层级确保画布覆盖整个屏幕并且位于其他元素下方。
在JavaScript部分首先获取了canvas元素及其绘图上下文接着初始化了画布的宽度和高度以匹配浏览器窗口。之后创建了一个辅助的canvascanvas2来预渲染星星的图像使用径向渐变填充模拟出星星从明亮到暗淡的渐变效果。
random函数用于生成随机数而maxOrbit函数则计算出星星的移动范围基于画布的尺寸。Star构造函数定义了星星的属性和方法包括其轨道半径、大小、位置、速度和透明度。星星的运动遵循正弦和余弦函数从而产生环绕中心点的圆周运动。
animation函数实现了动画循环它首先设置全局混合模式为source-over然后设置全局透明度为0.5以绘制星星留下的“尾巴”效果。接下来使用hsla颜色填充整个画布然后切换全局混合模式为lighter以正确地叠加星星图像。通过遍历所有星星对象并调用draw方法实现星星的绘制和更新。最后利用requestAnimationFrame来确保动画的平滑执行每帧都调用animation函数自身形成连续的动画效果。
整个星空特效通过精心设计的星星闪烁算法和动态渲染技术呈现出一个既真实又具有艺术感的星空场景。
运行效果 系列文章
序号目录直达链接1HTML实现3D相册HTML实现3D相册-CSDN博客2HTML元素周期表HTML元素周期表-CSDN博客3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客7HTML爱情树HTML爱情树-CSDN博客8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客9HTML想见你HTML想见你-CSDN博客10HTML蓝色爱心HTML蓝色爱心-CSDN博客11HTML跳动的爱心HTML跳动的爱心-CSDN博客12HTML橙色爱心HTML橙色爱心-CSDN博客13HTML大雪纷飞HTML大雪纷飞-CSDN博客14HTML跨年烟花HTML跨年烟花-CSDN博客15HTML跳动的爱心HTML跳动的爱心-CSDN博客16HTML动态爱心HTML动态爱心-CSDN博客17HTML浪漫星空https://want595.blog.csdn.net/article/details/13979962018192021222324252627
写在后面
我是一只有趣的兔子感谢你的喜欢
