Mẫu chấm với canvas html

Question

Điều tôi hiện có là nhiều phần tử html, cùng với jQuery và css để tạo một mẫu chấm có hiệu ứng dựa trên chuyển động của chuột. Thật khó để giải thích vì vậy tôi đã làm một ví dụ. 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)'); 
     } 
    }); 


}); 

Vấn đề là hiệu suất bị lỗi nên tôi đã nghĩ về việc tạo hiệu ứng tương tự với canvas html. Tôi không có ý tưởng nếu nó sẽ làm việc mặc dù.

Các bạn có biết cách nào khác để tôi có thể tạo hiệu ứng tương tự mà không cần nhiều yếu tố html hay không. Cảm ơn.

EDIT: Cảm ơn markE cho câu trả lời của bạn. Nó đã giúp tôi rất nhiều. Điều này tôi đã nghĩ ra.

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

Có, bạn có thể sử dụng vải cho hiệu suất tốt hơn:

• Nghe cho các sự kiện MouseMove

• tính toán khoảng cách giữa các con chuột & một xiếc le trung tâm:

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

• vẽ lại một hình tròn thổi phồng/xì hơi dựa trên khoảng cách giữa chuột là hình tròn

Chúc may mắn với dự án của bạn!

Dưới đây là một khái niệm bằng chứng-of-với 1 vòng tròn:

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>