Rubber ball follows mouse cursor

Here is code rubber ball, it follows mouse cursor when you move.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas-Animaci&oacute;n</title>
    
    <script type="text/javascript">
      var x=0; //coordenada x del objeto
      var incx=10; //incremento x 
      var y=0;  //coordenada y del objeto
      var incy=5; //incremental de y
      var mouseX=0;
      var mouseY=0;
      var delay=10;
      var timer=10;
      
      function init(){
          var canvas = document.getElementById('tutorial');
//loop calls dibuja each 20 ms setInterval(dibuja,20); canvas.addEventListener('mousemove', ev_mousemove, false);
} function ev_mousemove (ev) { mouseX = ev.layerX; mouseY = ev.layerY; } function dibuja(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); timer+=1; ctx.fillStyle ="rgba(200,30,10,1)"; ctx.strokeStyle="#000"; delay=20-(mouseY/100); accelX=mouseX-x; accelY=mouseY-y; x+=(accelX)/delay; y+=(accelY)/delay; x+=Math.sin(timer)*accelX/5; y+=Math.sin(timer)*accelY/5; //limpia el canvas ctx.clearRect(0,0,400,400); //dibuja linea ctx.beginPath(); ctx.moveTo(200,400); ctx.lineTo(x,y); ctx.stroke(); //dibuja el circulo ctx.beginPath(); ctx.arc(x,y,50,0,Math.PI*2,true); ctx.fill(); // ctx.translate((200-mouseX)/100,0);
} } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="init();"> <canvas id="tutorial" width="400" height="400"></canvas> </body> </html>

DEMO:

How to Text Shadow on CSS3

Use this style to create text shadow on css3:

#shaddow {
font-family: sans-serif;
font-size: 90px;
font-weight: bold;
color: #FFF;
position:absolute;
left: 296px;
text-align: center;
top: 259px;
width: 669px;
height: 136px;
}

Preview below:

CSS3 Text Shaddow

Cloning an image with EaselJS dynamically to multiple canvases

Good day! I’m here to ask help about dynamic variable names in Javascript applied to a constructor. It’s been much more difficult than expected. I’ve read about this issue in numerous forums and webpages but I can’t find what I’m doing wrong =/

I’m using a HTML5+Javascript library called EaselJS but my problem it’s not related to it but to Javascript syntaxis! Here’s my problem. I got this code:

stage1 = new Stage(document.getElementById("cnvs1")); stage2 = new Stage(document.getElementById("cnvs2")); stage3 = new Stage(document.getElementById("cnvs3"));

Here, the variables stage have assigned an Stage object which is initialized with canvas id cnvs This line (in the context of the rest of my code) works! I’d like to simplify this to a single line with a for like this:

for(i = 0; i < 5; i++){   //Of course this is wrong!   stage[i] = new Stage(document.getElementById("cnvs[i]")); }

This link here resumes how this can be done: With eval (a lot of people say it’s not recommendable) and with window (recommended) Then if I do this (without the for to simplify even more):

var varname = "stage"; var i = 1; window[varname + i] = new Stage(document.getElementById("cnvs_terminal1"));

The code still works. But I can’t figure out how to accomplish a similar solution with the canvas id in quotes. These lines of code fail:

var i = 1; var varname = "stage"; var varname2 = 'cnvs1'; var varname3 = "\"cnvs1\""; var varname4 = "\"cnvs1" + i + "\""; window[varname +i] = new Stage(document.getElementById(window[varname2])); window[varname +i] = new Stage(document.getElementById(window[varname3])); window[varname +i] = new Stage(document.getElementById(window[varname4]));

In these attempts even trying to pass the exact value I need (without the i) it’s not helping me!! I’m backslashing quotes because I think they are necessary for the getElementbyId=( =( =(

Now I’m clueless! =( I’m certain there is a way to do this, maybe I don’t know the syntax, maybe I don’t know how to call variables with reference or by value properly, I don’t know… Please help me, I don’t know how to do this simple task!

THANKS A LOT =)

See answer here: http://stackoverflow.com/questions/10114754/dynamic-variable-names-with-javascript-and-constructor-cloning-an-image-with-ea

Ping your blog, website, or RSS feed for Free Sitetag