使用html canvas的点图案

Question

我现在有很多html元素，以及jQuery和css创建基于鼠标移动效果的点图案。这很难解释，所以我举了一个例子。 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元素的情况下创建相同的效果。谢谢。

编辑：谢谢markE你的答案。这对我帮助很大。这是我想出来的。

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事件时

• 计算鼠标&之间的距离保监会乐中心：

  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>