html结构:
<div> <img src="banner01.jpg" alt=""> <canvas></canvas></div>
script:
$(function() {//进行浏览器环境检测 //IE版本检测，非IE浏览器返回east.NOT_IEvarNOT_IE = 1000;varieVersion;if(navigator.appName === "Microsoft Internet Explorer"){ieVersion = +navigator.appVersion.match(/MSIE (\d\d?)/)[1]; }else if(navigator.userAgent.indexOf('Trident/7.0') !== -1){ieVersion = 11; }else{ieVersion = NOT_IE; }//banner画布if(ieVersion <= 9){$('<style>.opacity-zero{opacity: 1}</style>').appendTo('head'); }if(ieVersion <= 8){return; }var$mask = $('<img />'); $mask.on('load', ballInit)[0].src = "banner01-mask.png";functionballInit(){//背景画布var$canvas = $('canvas');varbgCanvas = $canvas[0];varctx = bgCanvas.getContext('2d');varwidth = 1920;varheight = 642; /* var minSize = 1; var maxSize = 1;//实际值为maxSize的平方 */varminSpeed = 0.03;varmaxSpeed = 0.06;varcount = 120;varballs = []; bgCanvas.width = width; bgCanvas.height = height;vargetPos = (function() {varrate = [0.60, 0.14, 0.1, 0.06, 0.05, 0.05];varlevel = [25, 75, 125, 175, 225, 255];varminSize = [1, 1, 1, 0.5, 0.5, 0.5];varmaxSize = [1.5, 1.5, 1.5, 1, 1, 0.5];varcanvas = $('<canvas></canvas>'); canvas.prop({width: width, height: height});varctx = canvas[0].getContext('2d'); ctx.drawImage($mask[0],0,0);varimageData = ctx.getImageData(0, 0, width, height).data;return function(){varx, y, type, selectType;type = (function(){varsum = 0, r = Math.random();for(vari = 0; i < rate.length; i++){if(sum < r && r < sum + rate[i]){returni; }sum += rate[i];}})();do{x = getRandom(0, width);y = getRandom(0, height);selectType = (function() {vardeep = imageData[(Math.round(y) * width + Math.round(x)) * 4];for(vari = 0; i < level.length; i++){if(deep <= level[i]){returni; }}})()}while(type !== selectType);return{x: x, y:y, minSize: minSize[type], maxSize: maxSize[type]}; }})();functionBall(init) {//init是否为球开始初始化varpos = getPos();this.centerX = pos.x;this.centerY = pos.y;this.radius = getRandom(pos.minSize, pos.maxSize);this.opacity = init ? getRandom(0, 1) : 0;this.speed = getRandomSpeed(init);this.color = getRandomColor(); }Ball.prototype.move =function() {this.opacity +=this.speed;if(this.opacity > 1) {this.opacity = 1;this.speed *= -1; }else if(this.opacity < 0) {Ball.call(this,false); }}; Ball.prototype.draw =function() {// var c = 4, r = this.radius * 3 + 10;varc = 0.5, r =this.radius * 0.1 + 0.1; ctx.beginPath(); ctx.arc(this.centerX,this.centerY,this.radius + c + r, 0, Math.PI * 2,false); ctx.closePath();varrg = ctx.createRadialGradient(this.centerX,this.centerY, 0,this.centerX,this.centerY,this.radius + c + r); rg.addColorStop(0,this.color(this.opacity)); rg.addColorStop(this.radius / (this.radius + c + r),this.color(this.opacity)); rg.addColorStop((this.radius + c) / (this.radius + c + r),this.color(this.opacity * 0.2)); rg.addColorStop(1,this.color(0)); ctx.fillStyle = rg; ctx.fill(); };functiongetRandom(min, max) {returnMath.random() * (max - min) + min; }functiongetRandomInt(min, max) {returnMath.floor(Math.random() * (max - min + 1) + min); }functiongetRandomSpeed(negative) {varspeed = getRandom(minSpeed, maxSpeed);returnnegative ? -speed : speed; }functiongetRandomColor() {varrgb = HSB2RGB(getRandom(15, 45),getRandom(0, 0.5),getRandom(0.98, 0.99));return function(opacity) {return"rgba(" + Math.floor(rgb[0]) + ","+ Math.floor(rgb[1]) + ","+ Math.floor(rgb[2]) + ","+ opacity.toFixed(3) + ")"; }}for(vari = 0; i < count; i++) {varball =newBall(true); balls.push(ball); }varf = 0, frames = 2;//控制几帧刷新一次 (functionstartAnimation() {f++; f %= frames;if(f == 0) {ctx.clearRect(0, 0, width, height);for(vari = 0; i < balls.length; i++) {balls[i].move();balls[i].draw();}}requestAnimationFrame(arguments.callee); })();functionHSB2RGB(h, s, b) {//HSB =>> RGBvarhsb = [h, s, b],r = 0, g = 0, b = 0,rgb = [255, 0, 0];//排序方式为主色、辅色、次辅色,非RGBif(hsb[0] <= 60) {r = 0;g = 1;b = 2; }else if(hsb[0] <= 120) {g = 0;r = 1;b = 2; }else if(hsb[0] <= 180) {g = 0;b = 1;r = 2; }else if(hsb[0] <= 240) {b = 0;g = 1;r = 2; }else if(hsb[0] <= 300) {b = 0;r = 1;g = 2; }else if(hsb[0] <= 360) {r = 0;b = 1;g = 2; }rgb[1] = Math.abs((hsb[0] + 60) % 120 - 60) * 255 / 60; rgb.forEach(function(val, idx, arr) {arr[idx] = val + (255 - val) * (1 - hsb[1]);arr[idx] *= hsb[2];});return[rgb[r], rgb[g], rgb[b]]; }}});
css代码:
*{margin:0; padding: 0;}div{position: relative; width: 100%; height: 642px;}canvas{position: absolute; width: 1920px; height: 642px; top: 0; left: 50%; z-index: 50; margin-left: -969px;}img{width: 100%;}
注意:需要引入jquery
效果截图：
如果觉得《Canvas实现小星星闪烁效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
