0

I am trying to create a canvas with symmetrical arranged dots that fadein/fadeout individual (like a pulse effect).

What I've got so far:

var ctx = $('#canvas')[0].getContext("2d");

ctx.fillStyle = "#fff";
var total_circles = 50,
    posTop = 10,
    posLeft = 10;

for(i = 0; i < total_circles; i++){
    posTop = posTop + 10,
    posLeft = posLeft + 10;
    ctx.beginPath();
    ctx.arc(posLeft, posTop, 3, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

http://jsfiddle.net/0tLxanws/

I don't even get the points arranged (first step, then animating).

I created a small image so you can see what I mean: enter image description here

Also a small jsfiddle with the effect but not with a canvas: http://jsfiddle.net/dx3jgy8h/

5
  • Are you saying that you want an effect like an optical illusion.? Jul 7, 2015 at 8:34
  • well, not really - what i actually want is that all circle have an opacity of 0.3 or something and some of then fadein/fade out, more like spangled sky Jul 7, 2015 at 9:03
  • 1
    something like this? jsfiddle.net/0tLxanws/1 Jul 7, 2015 at 9:33
  • yeah thats pretty cool. now how can i animate (fadein/out) random circles in a loop (like stars shining in :D ) Jul 23, 2015 at 11:41
  • i builded the effect I try to achieve here: jsfiddle.net/dx3jgy8h - the thing is, that this takes a lot performance and i think building it with a canvas would be better... Jul 27, 2015 at 16:28

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.