Motivo a punti con tela HTML

Question

Quello che ho attualmente sono molti elementi html, insieme a jQuery e css per creare un motivo a punti che ha un effetto basato sul movimento del mouse. È difficile da spiegare, quindi ho fatto un esempio. http://jsfiddle.net/sebastianscholten/u6ebt390/

var mX, mY, distance; 

function theDistance(elem, mouseX, mouseY) { 
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2))); 
} 

$(document).mousemove(function(e) { 
    mX = e.pageX; 
    mY = e.pageY; 
    cutoff = 100; 
    $('.element').each(function(){ 
     distance = theDistance($(this), mX, mY); 
     if (distance <= cutoff) { 
      $(this).css('transform', 'scale(' + (distance*(1/cutoff)-1) + ')'); 
     } else { 
      $(this).css('transform', 'scale(0)'); 
     } 
    }); 


}); 

Il problema è che la prestazione è buggy così ho pensato di fare lo stesso effetto con una tela html. Non ho idea se funzionerà comunque.

Ragazzi, sapete in qualsiasi altro modo che posso creare lo stesso effetto senza molti elementi html. Grazie.

MODIFICA: Grazie markE per la risposta. Mi ha aiutato molto. Questo è quello che mi è venuto in mente.

var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 

 
var circleRadius = 1; 
 
var circleMargin = 10; 
 
var canvasW = c.width; 
 
var canvasH = c.height; 
 

 
var $canvas = $("#canvas"); 
 
var canvasOffset = $canvas.offset(); 
 
var offsetX = canvasOffset.left; 
 
var offsetY = canvasOffset.top; 
 

 
var circleAmountX = canvasW/(circleRadius + (2 * circleMargin)); 
 
var circleAmountY = canvasH/(circleRadius + (2 * circleMargin)); 
 

 
function draw(mouseX, mouseY) { 
 
    ctx.clearRect(0, 0, canvasW, canvasH); 
 
    for (i = 0; i < circleAmountX + 1; i++) { 
 
     for (k = 0; k < circleAmountY + 1; k++) { 
 

 
      var x = i * (circleRadius + circleMargin * 2); 
 
      var y = k * (circleRadius + circleMargin * 2); 
 

 
      var dx = mouseX - x; 
 
      var dy = mouseY - y; 
 

 
      var inflation = 1; 
 
      var inflationAmount = 6; 
 
      var cutoff = 150; 
 

 
      var distance = Math.sqrt(dx * dx + dy * dy); 
 
      if (distance <= cutoff && distance > 0) { 
 
       inflation = inflationAmount - (distance/((cutoff/inflationAmount) + 2)); 
 
      } else if (distance = 0) { 
 
       inflation = inflationAmount; 
 
      } 
 
      ctx.beginPath(); 
 
      ctx.arc(x, y, circleRadius * inflation, 0, 2 * Math.PI); 
 
      ctx.fill(); 
 
      ctx.closePath(); 
 
     } 
 
    } 
 
} 
 

 
draw(0, 0); 
 

 
$("#canvas").mousemove(function (e) { 
 
    var mX = parseInt(e.clientX - offsetX); 
 
    var mY = parseInt(e.clientY - offsetY); 
 

 
    draw(mX, mY); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<canvas id="canvas" width=500 height=500></canvas>

Answer 1

Sì, è possibile utilizzare tela per migliorare le prestazioni:

• Ascoltare per gli eventi MouseMove

• calcolare la distanza tra il mouse & un circ Centre Le:

  var dx=mouseX-centerX; 
      var dy=mouseY-centerY; 
      var distance=Math.sqrt(dx*dx+dy*dy); 
  

• ridisegnare un cerchio gonfiato/sgonfio in base a quanto vicino il mouse è al cerchio

Buona fortuna con il vostro progetto!

Ecco un concetto proof-of-1 con cerchio:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 

 

 

 
var cx=150; 
 
var cy=150; 
 
var radius=30; 
 
var inflation=.25; 
 

 
draw(); 
 

 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 

 
function draw(){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.arc(150,150,inflation,0,Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 

 
function handleMouseMove(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    var dx=mouseX-cx; 
 
    var dy=mouseY-cy; 
 
    var distance=Math.sqrt(dx*dx+dy*dy); 
 
    if(distance<radius){ 
 
    inflation=radius; 
 
    }else if(distance<50){ 
 
    inflation=radius*.75; 
 
    }else if(distance<75){ 
 
    inflation=radius*.50; 
 
    }else{ 
 
    inflation=radius*.25; 
 
    } 
 
    draw();  
 

 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Approach the circle with the mouse</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>