HTML 星空动图背景（canvas+JS）

前几天看项目的时候看到一个星空动图，当时还以为是拿了一张GIF做背景，结果看代码找半天没找到，后来仔细阅读代码才发现原来是用canvas和JS做的，然后我这一抠啊，终于抠下来了。

先看效果（不晓得怎么截动图……）
（喜欢做网页动画的朋友可以拿去琢磨琢磨）

话不多说上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style>body{margin:0 auto;overflow:hidden;}.canvaszz{position:absolute;background-image: url(img/21.jpg);background-size: 100%;width:100%;height:100%;z-index:-1;filter:alpha(opacity=20);opacity: 0.4;}.canvas {position:absolute;display:inline-block;width:100%;height:auto;vertical-align:baseline;z-index:-2;}</style><body><div class="canvaszz"> </div><canvas id="canvas" class="canvas"></canvas> </body><script>drawStars();//画星空背景function drawStars() {var 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; //星星数量//canvas2是用来创建星星的源图像，即母版，//根据星星自身属性的大小来设置var canvas2 = document.createElement('canvas'),ctx2 = canvas2.getContext('2d');canvas2.width = 100;canvas2.height = 100;//创建径向渐变，从坐标(half，half)半径为0的圆开始，//到坐标为(half,half)半径为half的圆结束var half = canvas2.width / 2,gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);gradient2.addColorStop(0.025, '#CCC');//hsl是另一种颜色的表示方式，//h->hue,代表色调色彩，0为red，120为green，240为blue//s->saturation，代表饱和度，0%-100%//l->lightness，代表亮度，0%为black，100%位whitegradient2.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();// End cachefunction random(min, max) {if(arguments.length < 2) {max = min;min = 0;}if(min > max) {var hold = max;max = min;min = hold;}//返回min和max之间的一个随机值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;//星星在旋转圆圈位置的角度,每次增加speed值的角度//利用正弦余弦算出真正的x、y位置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() {//星星围绕在以屏幕中心为圆心，半径为orbitRadius的圆旋转var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,twinkle = random(10);//星星每次移动会有1/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;//使用canvas2作为源图像来创建星星，//位置在x - this.radius / 2, y - this.radius / 2//大小为 this.radiusctx.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();};//调用该方法执行动画，并且在重绘的时候调用指定的函数来更新动画//回调的次数通常是每秒60次window.requestAnimationFrame(animation);}animation();}</script>
</html>

如果有帮助到你的话
留个足迹再走吧 ( •̀ ω •́ )✧ ~

HTML 星空动图背景（canvas+JS）相关推荐

举个栗子！Tableau 技巧（95）：如何插入漂亮的动图背景
下面这个 Viz :关于雨量的可视化分析,图表的背景是一张淅淅沥沥下雨的动图(如下图),效果很不错! 那么,如何在 Tableau 中实现这样的动图背景呢?这里,我们分享方法给大家! 本期<举个 ...
快速去除GIF动图的背景（让背景变透明），保姆级教程
很多小伙伴在看到好看的动图效果时,想用在自己的页面上,可是常常会碰到一些动图背景颜色不符合自己的需求,所以会产生修改动图背景的想法,但是GIF动图终究是GIF动图,不像静态图片那样子处理起来快捷. 在 ...
用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
html5canvas下绘制gif,JS+canvas操作gif动图
这次给大家带来JS+canvas操作gif动图,JS+canvas操作gif动图的注意事项有哪些,下面就是实战案例,一起来看一下. HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现 ...
vue中利用gif.js实现GIF动图下载
前言 gif.js可以将帧图或者canvas拼成新的gif,gif.js没有npm install的库,引用方式如下: 1. 下载资源首先从官方仓库上下载代码,worker不能跨域,所以资源必然是放 ...
javascript制作gif动图----gif.js
Javascript制作gif动图 gif.js 官网软件简介出自开源软件 gif.js 是一个可直接在浏览器上运行的 JavaScript GIF 编码器.支持的浏览器包括: Google Ch ...
canvas——绘制图片——动图制作
图片: drawImage():将原图片像素的内容复制到画布上: 第一个参数是源图片,可以是img元素或Image构造函数创建的屏幕外图片对象: 三个参数时: 指定图片绘制的x.y坐标: 五个参数时: ...
关于canvas插入gif动图的替代方案
前言:目前canvas是不支持插入gif动图的,但是有些业务要求开发人员可以将gif动图插入到canvas中并进行一系列的操作(移动,缩放,旋转),本人也在网上找了一圈,也没有什么有效的方式,基本都是 ...
canvas 基础和动图案例
<canvas> 是 HTML5 新增的一种标签,一个可以使用脚本(通常为JavaScript)在其中绘制图的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚 ...

HTML 星空动图背景（canvas+JS）

HTML 星空动图背景（canvas+JS）

HTML 星空动图背景（canvas+JS）相关推荐

最新文章

热门文章