星空背景代码实现

Html

Css

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 = 1200;

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, '#fff');
 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();

// End cache
 $(window).resize(function() {
     w = canvas.width = window.innerWidth;
     h = canvas.height = window.innerHeight;
     canvas.width(w).height(h);

});

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) / 12;
     this.orbitX = w / 2;
     this.orbitY = h / 2;
     this.timePassed = random(0, maxStars);
     this.speed = random(this.orbitRadius) / 900000;
     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.8;
     ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
     ctx.fillRect(0, 0, w, h)

ctx.globalCompositeOperation = 'lighter';
     for (var i = 1, l = stars.length; i < l; i++) {
         stars[i].draw();
     };

window.requestAnimationFrame(animation);
 }

animation();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

星空背景代码实现



代码描述：h5 canvas星空背景

canvas注意要定义好其宽高。

6

最新

发表评论全部评论

暂时没有评论！

cll123456780

2018/11/19 10:38:06

请问背景颜色在哪里啊

zoneques0

2018/11/29 14:20:01

更改该值 hue ，详情先了解色调 http://www.yansedaquan.com/ 效果背景修改此行代码： ctx.fillstyle = `hsla(${hue}, 64%, 6%, 1)`

回复

绅士?君0

2017/9/19 11:40:54

我直接给canvas添加背景图片为啥没变化呢，特别想知道背景到底是在哪里控制的
<canvas id="canvas" width="1920" height="960" style="position: absolute;z-index: -1;background-image: url('1.png')"></canvas>
回复

绅士?君0

2017/9/19 11:24:41

canvas的背景色只能是黑色吗应该在哪里改找了好久
回复

画地为牢吧0

2017/8/15 17:48:25

类似这种效果密度要怎么控制
回复

丨墨言丨纱影映月0

2017/8/9 9:55:04

这个效果非常赞
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

zoneques

相关代码

星空背景代码实现

最新