带有 html 画布的点图案

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>