前端代码分享——星空背景特效（内含源码）

源码）"/>

前端代码分享——星空背景特效（内含源码）

文章目录

• 运行演示
• 核心代码

运行演示

打开网页效果最好哦

提供的JavaScript代码是一个名为"WarpDrive"的jQuery插件，它创建了一个星空动画，类似于科幻媒体（如《星际迷航》）中所看到的"超光速"效果。

核心代码

( function() {function WarpDrive( element, params ) {var settings = {};settings.width = 480;settings.height = 480;settings.autoResize = false;settings.autoResizeMinWidth = null;settings.autoResizeMaxWidth = null;settings.autoResizeMinHeight = null;settings.autoResizeMaxHeight = null;settings.addMouseControls = true;settings.addTouchControls = true;settings.hideContextMenu = true;settings.starCount = 6666;settings.starBgCount = 2222;settings.starBgColor = { r:255, g:255, b:255 };settings.starBgColorRangeMin = 10;settings.starBgColorRangeMax = 40;settings.starColor = { r:255, g:255, b:255 };settings.starColorRangeMin = 10;settings.starColorRangeMax = 100;settings.starfieldBackgroundColor = { r:0, g:0, b:0 };settings.starDirection = 1;settings.starSpeed = 20;settings.starSpeedMax = 200;settings.starSpeedAnimationDuration = 2;settings.starFov = 300;settings.starFovMin = 200;settings.starFovAnimationDuration =  2;settings.starRotationPermission = true;settings.starRotationDirection = 1;settings.starRotationSpeed = 0.0;settings.starRotationSpeedMax = 1.0;settings.starRotationAnimationDuration = 2;settings.starWarpLineLength = 2.0;settings.starWarpTunnelDiameter = 100;settings.starFollowMouseSensitivity = 0.025;settings.starFollowMouseXAxis = true;settings.starFollowMouseYAxis = true;//---if ( params !== undefined ) {for ( var prop in params ) {if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) ) {settings[ prop ] = params[ prop ];}}}//---for ( var prop in settings ) {if ( settings.hasOwnProperty( prop ) && prop.indexOf( 'Duration' ) > -1 ) {settings[ prop ] = settings[ prop ] * 60;}}if ( typeof settings.starBgColor === 'string' && settings.starBgColor.indexOf( '#' ) > -1 ) {settings.starBgColor = hexToRgb( settings.starBgColor );} else if ( typeof settings.starBgColor === 'string' && settings.starBgColor.indexOf( 'rgb' ) > -1 ) {settings.starBgColor = parseRGBString( settings.starBgColor );}if ( typeof settings.starColor === 'string' && settings.starColor.indexOf( '#' ) > -1 ) {settings.starColor = hexToRgb( settings.starColor );} else if ( typeof settings.starColor === 'string' && settings.starColor.indexOf( 'rgb' ) > -1 ) {settings.starColor = parseRGBString( settings.starColor );}if ( typeof settings.starfieldBackgroundColor === 'string' && settings.starfieldBackgroundColor.indexOf( '#' ) > -1 ) {settings.starfieldBackgroundColor = hexToRgb( settings.starfieldBackgroundColor );} else if ( typeof settings.starfieldBackgroundColor === 'string' && settings.starfieldBackgroundColor.indexOf( 'rgb' ) > -1 ) {settings.starfieldBackgroundColor = parseRGBString( settings.starfieldBackgroundColor );}if ( !element ) {throw Error( '\n' + 'No div element found' );}//---var MATHPI180 = Math.PI / 180;var MATHPI2 = Math.PI * 2;var canvasWidth = settings.width;var canvasHeight = settings.height;var starCount = settings.starCount;var starBgCount = settings.starBgCount;var starBgColor = settings.starBgColor;var starBgColorRangeMin = settings.starBgColorRangeMinvar starBgColorRangeMax = settings.starBgColorRangeMaxvar starColor = settings.starColor;var starColorRangeMin = settings.starColorRangeMin;var starColorRangeMax = settings.starColorRangeMax;var starfieldBackgroundColor = settings.starfieldBackgroundColor;var starDirection = settings.starDirection;var starSpeed = settings.starSpeed;var starSpeedMin = starSpeed;var starSpeedMax = settings.starSpeedMax;var starSpeedAnimationDuration = settings.starFovAnimationDuration;var starSpeedAnimationTime = 0;var starFov = settings.starFov;var starFovMin = settings.starFovMin;var starFovMax = starFov;var starFovAnimationDuration =  settings.starFovAnimationDuration;var starFovAnimationTime = starFovAnimationDuration;var starRotation = 0.0;var starRotationPermission = settings.starRotationPermission;var starRotationDirection = settings.starRotationDirection;var starRotationSpeed = settings.starRotationSpeed;var starRotationSpeedMin = starRotationSpeed;var starRotationSpeedMax = settings.starRotationSpeedMax;var starRotationAnimationDuration = settings.starRotationAnimationDuration;var starRotationAnimationTime = 0;var starWarpLineLength = settings.starWarpLineLength;var starWarpTunnelDiameter = settings.starWarpTunnelDiameter;var starFollowMouseSensitivity = settings.starFollowMouseSensitivity;var starFollowMouseXAxis = settings.starFollowMouseXAxis;var starFollowMouseYAxis = settings.starFollowMouseYAxis;var starDistance = 8000;var starBorderFront = -starFovMin + 1;var starBorderBack = starDistance;var starHolder;var starBgHolder;var starColorLookupTable;var starBgColorLookupTable;var canvas, ctx, imageData, pix;var center;var mouseActive;var mouseDown;var mousePos;var paused = false;//---function init() {canvas = document.createElement( 'canvas' );canvas.style.backgroundColor = rgbToHex( starfieldBackgroundColor.r, starfieldBackgroundColor.g, starfieldBackgroundColor.b );canvas.setAttribute( 'width', canvasWidth );canvas.setAttribute( 'height', canvasHeight );if ( settings.addMouseControls ) {canvas.addEventListener( 'mousemove', mouseMoveHandler, false );canvas.addEventListener( 'mousedown', mouseDownHandler, false );canvas.addEventListener( 'mouseup', mouseUpHandler, false );canvas.addEventListener( 'mouseenter', mouseEnterHandler, false ); canvas.addEventListener( 'mouseleave', mouseLeaveHandler, false ); }if ( settings.addTouchControls ) {canvas.addEventListener( 'touchstart', touchStartHandler, false );canvas.addEventListener( 'touchend', touchEndHandler, false );canvas.addEventListener( 'touchmove', touchMoveHandler, false );canvas.addEventListener( 'touchcancel', touchCancelHandler, false );}if ( settings.hideContextMenu ) {canvas.oncontextmenu = function( e ) {e.preventDefault();};}element.appendChild( canvas );//---ctx = canvas.getContext( '2d' );imageData = ctx.getImageData( 0, 0, canvasWidth, canvasHeight );pix = imageData.data;//---center = { x:canvas.width / 2, y:canvas.height / 2 };mouseActive = false;mouseDown = false;mousePos = { x:center.x, y:center.y };//---starColorLookupTable = [];starBgColorLookupTable = [];starHolder = [];starBgHolder = [];addColorLookupTable( starColorLookupTable, starColorRangeMin, starColorRangeMax, starfieldBackgroundColor, starColor );addColorLookupTable( starBgColorLookupTable, starBgColorRangeMin, starBgColorRangeMax, starfieldBackgroundColor, starBgColor );addStars();animloop();//---if ( settings.autoResize ) {window.addEventListener( 'resize', resizeHandler );resize();}};//---Math.easeInQuad = function( t, b, c, d ) {return c * t * t / ( d * d ) + b;};Math.easeOutQuad = function( t, b, c, d ) {return -c * t * t / ( d * d ) + 2 * c * t / d + b;};//---// shadeBlend( p, c0, c1 ) {var n = p < 0 ? p * -1 : p, u = Math.round, w = parseInt;var f = w( c0.slice( 1 ), 16 ), t = w( ( c1 ? c1 : p < 0 ? '#000000' : '#FFFFFF' ).slice( 1 ), 16 ), R1 = f >> 16, G1 = f >> 8 & 0x00FF, B1 = f & 0x0000FF;return '#' + ( 0x1000000 + ( u ( ( ( t >> 16 ) - R1 ) * n ) + R1 ) * 0x10000 + ( u ( ( ( t >> 8 & 0x00FF ) - G1 ) * n ) + G1 ) * 0x100 + ( u ( ( ( t & 0x0000FF ) - B1 ) * n ) + B1 ) ).toString( 16 ).slice( 1 );};//---// hexToRgb( hex ) {var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;hex = hex.replace( shorthandRegex, function( m, r, g, b ) {return r + r + g + g + b + b;} );var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );return result ? {r: parseInt( result[ 1 ], 16 ),g: parseInt( result[ 2 ], 16 ),b: parseInt( result[ 3 ], 16 )} : null;};function rgbToHex( r, g, b ) {var rgb = b | ( g << 8 ) | ( r << 16 );return '#' + ( 0x1000000 + rgb ).toString( 16 ).slice( 1 );};//---function parseRGBString( rgbString ) {rgbString = rgbString.replace( /\s+/g, '' );var rgbValues = rgbString.split( '(' )[ 1 ].split( ')' )[ 0 ].split( ',' );return { r:rgbValues[ 0 ], g:rgbValues[ 1 ], b:rgbValues[ 2 ] };}//---function clearImageData() {for ( var i = 0, l = pix.length; i < l; i += 4 ) {pix[ i ]     = starfieldBackgroundColor.r;pix[ i + 1 ] = starfieldBackgroundColor.g;pix[ i + 2 ] = starfieldBackgroundColor.b;pix[ i + 3 ] = 0;}};function setPixelAdditive( x, y, r, g, b, a ) {var i = ( x + y * canvasWidth ) * 4;pix[ i ]     = pix[ i ]     + r;pix[ i + 1 ] = pix[ i + 1 ] + g;pix[ i + 2 ] = pix[ i + 2 ] + b;pix[ i + 3 ] = a;};//---function drawLine( x1, y1, x2, y2, r, g, b, a ) {var dx = Math.abs( x2 - x1 );var dy = Math.abs( y2 - y1 );var sx = ( x1 < x2 ) ? 1 : -1;var sy = ( y1 < y2 ) ? 1 : -1;var err = dx - dy;var lx = x1;var ly = y1;    while ( true ) {if ( lx > -1 && lx < canvasWidth && ly > -1 && ly < canvasHeight ) {setPixelAdditive( lx, ly, r, g, b, a );}if ( ( lx === x2 ) && ( ly === y2 ) )break;var e2 = 2 * err;if ( e2 > -dx ) { err -= dy; lx += sx; }if ( e2 < dy ) { err += dx; ly += sy; }}};//---function addColorLookupTable( colorLookupTable, colorRangeMin, colorRangeMax, colorRGBStart, colorRGBEnd ) {var colorHexStart = rgbToHex( colorRGBStart.r, colorRGBStart.g, colorRGBStart.b );var colorHexEnd   = rgbToHex( colorRGBEnd.r, colorRGBEnd.g, colorRGBEnd.b );var colorRange = [];var colorEndValues = [];var percent;var i, l, j, k;for ( i = 0, l = 100; i <= l; i++ ) {percent = i / 100;colorRange.push( shadeBlend( percent, colorHexStart, colorHexEnd ) );}for ( i = 0, l = colorRangeMax - colorRangeMin; i <= l; i++ ) {var index = i + colorRangeMin;colorEndValues.push( colorRange[ index ] );}for ( i = 0, l = colorEndValues.length; i < l; i++ ) {colorRange = [];for ( j = 0, k = 100; j <= k; j++ ) {percent = j / 100;colorRange.push( hexToRgb( shadeBlend( percent, colorHexStart, colorEndValues[ i ] ) ) );}colorLookupTable.push( colorRange );}};//---function getStarPosition( radius, sideLength ) {var x = Math.random() * sideLength - ( sideLength / 2 );var y = Math.random() * sideLength - ( sideLength / 2 );if ( radius > 0 ) {while ( Math.sqrt( x * x + y * y ) < radius ) {x = Math.random() * sideLength - ( sideLength / 2 );y = Math.random() * sideLength - ( sideLength / 2 );}}return { x:x, y:y };};function addStar( x, y, z, ox, oy, oz ) {var star = {};star.x = x;star.y = y;star.z = z;star.ox = ox;star.oy = oy;star.x2d = 0;star.y2d = 0;return star;};function addStars() {var i;var x, y, z;var star, starPosition;for ( i = 0; i < starBgCount; i++ ) {starPosition = getStarPosition( 0, 20000 );x = starPosition.x;y = starPosition.y;z = Math.round( Math.random() * starDistance );star = addStar( x, y, z, x, y, z );star.colorIndex = Math.floor( Math.random() * starBgColorLookupTable.length );star.colorLookupTable = starBgColorLookupTable[ star.colorIndex ];star.color = star.colorLookupTable[ Math.floor( Math.random() * 100 ) ];starBgHolder.push( star );}for ( i = 0; i < starCount; i++ ) {starPosition = getStarPosition( starWarpTunnelDiameter, 10000 );x = starPosition.x;y = starPosition.y;z = Math.round( Math.random() * starDistance );star = addStar( x, y, z, x, y, z );star.distance = starDistance - z;star.distanceTotal = Math.round( starDistance + starFov );star.colorIndex = Math.floor( Math.random() * starColorLookupTable.length );star.colorLookupTable = starColorLookupTable[ star.colorIndex ];star.color = star.colorLookupTable[ Math.floor( ( star.distance / star.distanceTotal ) * 100 ) ];starHolder.push( star );}};//---window.requestAnimFrame = ( function() {return  window.requestAnimationFrame       ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};} )();function animloop() {requestAnimFrame( animloop );if ( !paused ) {render();}};//---function render() {clearImageData();//---var i, j, l, k, m, n;//---var star;var scale;//---if ( starRotationPermission ) {if ( mouseDown ) {starRotationAnimationTime += 1;if ( starRotationAnimationTime > starRotationAnimationDuration )starRotationAnimationTime = starRotationAnimationDuration;} else {starRotationAnimationTime -= 1;if ( starRotationAnimationTime < 0 )starRotationAnimationTime = 0;}starRotationSpeed = Math.easeOutQuad( starRotationAnimationTime, starRotationSpeedMin, starRotationSpeedMax, starRotationAnimationDuration );starRotation -= starRotationSpeed * starRotationDirection;}//---if ( mouseActive ) {starSpeedAnimationTime += 1;if ( starSpeedAnimationTime > starSpeedAnimationDuration )starSpeedAnimationTime = starSpeedAnimationDuration;starFovAnimationTime -= 1;if ( starFovAnimationTime < 0 )starFovAnimationTime = 0;//---if ( starFollowMouseXAxis ) {center.x += ( mousePos.x - center.x ) * starFollowMouseSensitivity;}if ( starFollowMouseYAxis ) {center.y += ( mousePos.y - center.y ) * starFollowMouseSensitivity;}} else {starSpeedAnimationTime -= 1;if ( starSpeedAnimationTime < 0 )starSpeedAnimationTime = 0;starFovAnimationTime += 1;if ( starFovAnimationTime > starFovAnimationDuration )starFovAnimationTime = starFovAnimationDuration;//---if ( starFollowMouseXAxis ) {center.x += ( ( canvas.width / 2 ) - center.x ) * starFollowMouseSensitivity;}if ( starFollowMouseYAxis ) {center.y += ( ( canvas.height / 2 ) - center.y ) * starFollowMouseSensitivity;}}starSpeed = Math.easeOutQuad( starSpeedAnimationTime, 0, starSpeedMax - starSpeedMin, starSpeedAnimationDuration ) + starSpeedMin;starFov = Math.easeInQuad( starFovAnimationTime, 0, starFovMax - starFovMin, starFovAnimationDuration ) + starFovMin;//---starBorderFront = -starFov + 1;//---var warpSpeedValue = starSpeed * ( starSpeed / ( starSpeedMax / starWarpLineLength ) );//---//stars bgfor ( i = 0, l = starBgHolder.length; i < l; i++ ) {star = starBgHolder[ i ];scale = starFov / ( starFov + star.z ); star.x2d = ( star.x * scale ) + center.x; star.y2d = ( star.y * scale ) + center.y; if ( star.x2d > -1 && star.x2d < canvasWidth && star.y2d > -1 && star.y2d < canvasHeight ) {setPixelAdditive( star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255 );}}//---//stars movingfor ( i = 0, l = starHolder.length; i < l; i++ ) {star = starHolder[ i ];//---//star distance calcstar.distanceTotal = Math.round( starDistance + starFov );//---//star movementif ( starDirection >= 0 ) {star.z -= starSpeed;star.distance += starSpeed;if ( star.z < starBorderFront ) {star.z = starBorderBack;star.distance = 0;}  } else {star.z += starSpeed;star.distance -= starSpeed;if ( star.z > starBorderBack ) {star.z = starBorderFront;star.distance = star.distanceTotal;}}//---//star colorstar.color = star.colorLookupTable[ Math.floor( ( star.distance / star.distanceTotal ) * 100 ) ];//---//star position & drawscale = starFov / ( starFov + star.z ); star.x2d = ( star.x * scale ) + center.x; star.y2d = ( star.y * scale ) + center.y; if ( starSpeed === starSpeedMin ) {if ( star.x2d > -1 && star.x2d < canvasWidth && star.y2d > -1 && star.y2d < canvasHeight ) {setPixelAdditive( star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255 );}} else {var nz = star.z + warpSpeedValue;scale = starFov / ( starFov + nz ); var x2d = ( star.x * scale ) + center.x; var y2d = ( star.y * scale ) + center.y; if ( x2d > -1 && x2d < canvasWidth && y2d > -1 && y2d < canvasHeight ) {drawLine( star.x2d | 0, star.y2d | 0, x2d | 0, y2d | 0, star.color.r, star.color.g, star.color.b, 255 );}}//---//star rotationif ( starRotationSpeed !== starRotationSpeedMin ) {var radians = MATHPI180 * starRotation;var cos = Math.cos( radians );var sin = Math.sin( radians );star.x = cos * star.ox + sin * star.oy;star.y = cos * star.oy - sin * star.ox;}}//---ctx.putImageData( imageData, 0, 0 );};function resizeHandler( event ) {resize();};function resize() {canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;if ( settings.autoResizeMinWidth && canvasWidth < settings.autoResizeMinWidth ) {canvasWidth = settings.autoResizeMinWidth;} else if ( settings.autoResizeMaxWidth && canvasWidth > settings.autoResizeMaxWidth ) {canvasWidth = settings.autoResizeMaxWidth;}if ( settings.autoResizeMinHeight && canvasHeight < settings.autoResizeMinHeight ) {canvasHeight = settings.autoResizeMinHeight;} else if ( settings.autoResizeMaxHeight && canvasHeight > settings.autoResizeMaxHeight ) {canvasHeight = settings.autoResizeMaxHeight;}//---canvas.setAttribute( 'width', canvasWidth );canvas.setAttribute( 'height', canvasHeight );center = { x:canvas.width / 2, y:canvas.height / 2 };//---imageData = ctx.getImageData( 0, 0, canvasWidth, canvasHeight );pix = imageData.data;};//---function mouseMoveHandler( event ) {mousePos = getMousePos( canvas, event );};function mouseEnterHandler( event ) {mouseActive = true;};function mouseLeaveHandler( event ) {mouseActive = false;mouseDown = false;};function mouseDownHandler( event ) {mouseDown = true;};function mouseUpHandler( event ) {mouseDown = false;};//---function getMousePos( canvas, event ) {var rect = canvas.getBoundingClientRect();return { x: event.clientX - rect.left, y: event.clientY - rect.top };};//---function touchStartHandler( event ) {event.preventDefault();mouseDown = true;mouseActive = true;};function touchEndHandler( event ) {event.preventDefault();mouseDown = false;mouseActive = false;};function touchMoveHandler( event ) {event.preventDefault();mousePos = getTouchPos( canvas, event );};function touchCancelHandler( event ) {mouseDown = false;mouseActive = false;};//---function getTouchPos( canvas, event ) {var rect = canvas.getBoundingClientRect();return { x: event.touches[ 0 ].clientX - rect.left, y: event.touches[ 0 ].clientY - rect.top };};//---this.pause = function() {paused = true;};this.unpause = function() {paused = false;};//---init();};window.WarpDrive = WarpDrive;} () );if ( typeof jQuery !== 'undefined' ) {( function( $ ) {$.fn.warpDrive = function( params ) {var args = arguments;return this.each( function() {if ( !$.data( this, 'plugin_WarpDrive' ) ) {$.data( this, 'plugin_WarpDrive', new WarpDrive( this, params ) );} else {var plugin = $.data( this, 'plugin_WarpDrive' );if ( plugin[ params ] ) {plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) );} else {$.error( 'Method ' +  params + ' does not exist on jQuery.warpDrive' );}}} );};} ( jQuery ) );}

提供的JavaScript代码是一个名为"WarpDrive"的jQuery插件，它创建了一个星空动画，类似于科幻媒体（如《星际迷航》）中所看到的"超光速"效果。