jquery – 带有html画布的圆点图案

我目前拥有的是很多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,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,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);

});