小编Seb*_*ten的帖子

我目前拥有的是很多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 = …