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

概述我目前拥有的是很多html元素,以及jQuery和css来创建一个基于鼠标移动效果的点阵图案.很难解释所以我做了一个例子. http://jsfiddle.net/sebastianscholten/u6ebt390/var mX, mY, distance; function theDistance(elem, mouseX, mouseY) {

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

          总结       
以上是内存溢出为你收集整理的jquery  – 带有html画布的圆点图案全部内容，希望文章能够帮你解决jquery  – 带有html画布的圆点图案所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://www.54852.com/web/1122014.html