canvas百焦点

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

//---

console.clear();

//---

let w = 1024;
let h = 512;

let animationFrame = null;

const canvas = document.createElement( 'canvas' );
const context = canvas.getContext( '2d' );

let imageData = null;
let data = null;

const center = { x: w / 2, y: h / 2 };
const border = { left: 1, top: 1, right: w, bottom: h };

//---

let mousePos = { x: center.x, y: center.y };

let dotsHolder = [];
const dotsCount = 100;
const dotsRadius = 10;
const dotsDiameter = dotsRadius * 2;
const dotsDistance = 25;
const dotsSpeed = 10;
const dotsWobbleFactor = 0.9;
const dotsWobbleSpeed = 0.05;
const dotsMouseDistanceSensitivity = 100;
const dotsMaxEscapeRouteLength = 100;

//---

function init() {

canvas.addEventListener( 'mousemove', mouseMoveHandler, false );

document.body.appendChild( canvas );

window.addEventListener( 'resize', onResize, false );

restart();

}

function onResize( event ) {
    
  restart();

}

function restart() {

w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

canvas.width = w;
  canvas.height = h;

imageData = context.getImageData( 0, 0, w, h );
  data = imageData.data;
  
  //---
  
  center.x = w / 2;
  center.y = h / 2;
  
  mousePos.x = -1000;//center.x + Math.random() * center.x;//center.x;
  mousePos.y = -1000;//center.y + Math.random() * center.y;//center.y;
  
  border.right = w;
  border.bottom = h;
  
  //---
  
  removeDots();
  addDots();
  
  //---
  
  if ( animationFrame != null ) {
  
  	cancelAnimFrame( animationFrame );
  
  }
 	
	render();

}

//---

function addDots() {

const dotsPerRow = dotsCount / 10;
  const dotsPerColumn = dotsPerRow;
  
  const xs = Math.round( center.x - ( dotsPerRow * ( dotsDiameter + dotsDistance ) ) / 2 ) + dotsDiameter;
  const ys = Math.round( center.y - ( dotsPerColumn * ( dotsDiameter + dotsDistance ) ) / 2 ) + dotsDiameter;
  const xe = xs + dotsPerRow * ( dotsDistance + dotsDiameter );
  const ye = ys + dotsPerColumn * ( dotsDistance + dotsDiameter );

for ( let x = xs; x < xe; x += dotsDistance + dotsDiameter ) {
  
  	for ( let y = ys; y < ye; y += dotsDistance + dotsDiameter ) {
    
    	const dot = addDot( x, y, dotsRadius, dotsDiameter, Math.floor( Math.random() * 255 ), 0, 255, 255 );

dotsHolder.push( dot );

}
  
  }

}

function addDot( x, y, radius, diameter, r, g, b, a ) {

const dot = {};
  
  dot.cx = x;
  dot.cy = y;
  dot.x = x;
  dot.y = y;
  dot.sx = 0;
  dot.sy = 0;
  dot.radius = radius;
  dot.r = radius;
  dot.diameter = diameter;
	dot.color = {};
  dot.color.r = r;
  dot.color.g = g;
  dot.color.b = b;
  dot.color.a = a;
  dot.active = 0;
	
  return dot;

}

function removeDots() {

if ( dotsHolder.length > 0 ) {
  
  	dotsHolder = [];
  
  }

}

//---

function mouseMoveHandler( event ) {

mousePos = getMousePos( canvas, event );

}

function getMousePos( canvas, event ) {

const rect = canvas.getBoundingClientRect();

return { x: event.clientX - rect.left, y: event.clientY - rect.top };

}

//---

function clearImageData() {

for ( let i = 0, l = data.length; i < l; i += 4 ) {

data[ i ] = 0;
    data[ i + 1 ] = 0;
    data[ i + 2 ] = 0;
    data[ i + 3 ] = 0;

}

function setPixel( x, y, r, g, b, a ) {

const i = ( x + y * imageData.width ) * 4;

data[ i ] = r;
  data[ i + 1 ] = g;
  data[ i + 2 ] = b;
  data[ i + 3 ] = a;

}

//---

function drawLine( x1, y1, x2, y2, r, g, b, a ) {

const dx = Math.abs( x2 - x1 );
  const dy = Math.abs( y2 - y1 );

const sx = ( x1 < x2 ) ? 1 : -1;
  const sy = ( y1 < y2 ) ? 1 : -1;

let err = dx - dy;

let lx = x1;
  let ly = y1;

while ( true ) {

if ( lx > 0 && lx < w && ly > 0 && ly < h ) {

setPixel( lx, ly, r, g, b, a );

}

if ( ( lx === x2 ) && ( ly === y2 ) ) {
    
    	break;
    
    }

const e2 = 2 * err;

if ( e2 > -dx ) {

err -= dy; 
      lx += sx;

}

if ( e2 < dy ) {

err += dx; 
      ly += sy;

}

//---

function drawCircle( x, y, radius, r, g, b, a ) {

if ( radius === 1 ) {

if ( x > border.left && x < border.right && y > border.top && y < border.bottom ) {

setPixel( x | 0, y | 0, r, g, b, a );

}

return;

}

for ( let x2d = x - radius; x2d < x + radius; x2d++ ) {

for ( let y2d = y - radius; y2d < y + radius; y2d++ ) {

var aa = x - x2d;
      var bb = y - y2d;

var distance = Math.sqrt( aa * aa + bb * bb );

if ( distance > radius ) {

continue;

}

if ( x2d > border.left && x2d < border.right && y2d > border.top && y2d < border.bottom ) {

setPixel( x2d | 0, y2d | 0, r, g, b, a  );

}

//---

function draw() {

for ( let i = 0, l = dotsHolder.length; i < l; i++ ) {
  
  	const dot = dotsHolder[ i ];
    
    //---

const distX = dot.cx - mousePos.x;
    const distY = dot.cy - mousePos.y;

const distMouse = Math.sqrt( distX * distX + distY * distY );

//---
    
    const angle = Math.atan2( mousePos.y - dot.cy, mousePos.x - dot.cx );

const dirX = Math.cos( angle ) * -1;
    const dirY = Math.sin( angle ) * -1;

const targetPosX = dot.cx + dirX * dotsMaxEscapeRouteLength;
    const targetPosY = dot.cy + dirY * dotsMaxEscapeRouteLength;
    
		//---
      
    if ( distMouse < dotsMouseDistanceSensitivity ) {

dot.x += ( targetPosX - dot.x ) / dotsSpeed;
      dot.y += ( targetPosY - dot.y ) / dotsSpeed;
      
      dot.active = 1;
      
      if ( dot.radius < dot.r * 2 ) {
      
      	dot.radius += ( dot.r * 2 - dot.radius ) / ( dotsSpeed * 2 );
      
      }

} else {

//dot.x += ( dot.cx - dot.x ) / dotsSpeed;
      //dot.y += ( dot.cy - dot.y ) / dotsSpeed;

dot.sx = dot.sx * dotsWobbleFactor + ( dot.cx - dot.x ) * dotsWobbleSpeed;
      dot.sy = dot.sy * dotsWobbleFactor + ( dot.cy - dot.y ) * dotsWobbleSpeed;

dot.x = Math.round( dot.x + dot.sx );
      dot.y = Math.round( dot.y + dot.sy );
      
      dot.active = 0;
      
      if ( dot.radius > dot.r ) {
      
      	dot.radius += ( dot.r - dot.radius ) / dotsSpeed;
      
      }

}
    
    //---
    
    drawCircle( dot.cx, dot.cy, dot.r, Math.floor( dot.color.r / 2 ), Math.floor( dot.color.g / 2 ), Math.floor( dot.color.b / 2 ), Math.floor( dot.color.a / 2 ) );
  
  }
  
  dotsHolder = dotsHolder.sort( function( a, b ) {

return ( a.active - b.active );

} );
  
  for ( let i = 0, l = dotsHolder.length; i < l; i++ ) {
  
  	const dot = dotsHolder[ i ];
    
    drawLine( dot.cx, dot.cy, dot.x | 0, dot.y | 0, dot.color.r, dot.color.g, dot.color.b, dot.color.a );
    
    drawCircle( dot.x, dot.y, dot.radius, dot.color.r, dot.color.g, dot.color.b, dot.color.a );
    
  }

}

//---

function render( timestamp ) {

clearImageData();

//---

draw();

//---

context.putImageData( imageData, 0, 0 );
  
	//---

animationFrame = requestAnimFrame( render );

}

window.requestAnimFrame = ( function() {

return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.msRequestAnimationFrame     ||
            function( callback ) {
                window.setTimeout( callback, 1000 / 60 );
            };

} )();

window.cancelAnimFrame = ( function() {

return  window.cancelAnimationFrame       ||
            window.mozCancelAnimationFrame;

} )();

//---

init();

//---

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg