canvas面向对象绘制背景星星闪烁

Html

Css

#canvas {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:#000;
}

/*********************************整屏canvas背景***********************************/
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 = 200; //星星数量
/********************************绘制星星*****************************************/
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); //渐变开始圆的x  y坐标，开始圆的半径；渐变结束圆的x y 坐标，结束圆的半径
//渐变色
gradient2.addColorStop(0.02, '#FCFAFF'); //星星内白点大小
gradient2.addColorStop(0.05, 'hsl(' + hue + ', 50%, 20%)'); //渐变色
gradient2.addColorStop(0.3, 'transparent');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

function animation() {
    ctx.clearRect(0, 0, w, h); //清理画布
    for (var i = 1, l = stars.length; i < l; i++) {
        stars[i].draw();
    };
    window.requestAnimationFrame(animation);
}
animation();

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

立即下载

canvas面向对象绘制背景星星闪烁



代码描述：利用面向对象及canvas绘制黑色背景下的点点星星，一些星星通过canvas动画实现闪烁

更新时间：2019-08-20 00:22:41
利用面向对象设置星星属性，通过canvas动画实现星星的闪烁，达到动态效果。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

旅行火车

相关代码

canvas面向对象绘制背景星星闪烁

最新