html 캔버스가있는 도트 패턴

Question

현재 내가 가지고있는 것은 jQuery와 CSS와 함께 마우스 동작에 기반한 효과가있는 도트 패턴을 만드는 많은 html 요소입니다. 설명하기가 어렵 기 때문에 예를 만들었습니다. 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)'); 
     } 
    }); 


}); 

문제는 성능이 그래서는 HTML 캔버스와 같은 효과를 만드는 방법에 대한 생각 버그 것입니다. 비록 그것이 작동할지 모르겠다.

많은 사람들이 html 요소가 많이 없으면 같은 효과를 낼 수있는 다른 방법을 알고 계십니까? 감사.

수정 : 감사합니다. 그것은 나를 많이 도왔다. 이게 내가 생각해 낸거야.

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

예, 당신은 더 나은 성능을 위해 캔버스를 사용할 수 있습니다

• 을 MouseMove 이벤트 이벤트

• 를 수신 마우스 &을 사이의 거리를 계산 circ 르 센터 : 마우스가 프로젝트와 원

행운에 얼마나 가까운

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

을 기반으로 수축/팽창 원을 그리기! 여기

1 원이 개념 증명입니다 : 그냥 데모와 나를 어지럽게 만들기위한

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>