Movimentando DIV texto

[jsmoraes]

Texto

Texto do Div Texto do Div Texto do Div

Código fonte:

<nabble_embed><canvas id="myCanvas" width="480" height="320"></canvas>

<div id="nomedodiv" style="z-index:1;position:relative;left:0px;top:-170px;background-color:orange;color:white;width:60px;padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;height:12px;border-radius: 10px;align:right;font-size:80%;text-align:center">Texto</div>

<div style="z-index:2;position:absolute;left:130px;top:330px;width:auto;height:34px;margin:0px 0px 0px 0px;padding:8px 0px 0px 0px;
font-size:100%;text-align:center; background-color:yellow;color:green">Texto do Div Texto do Div Texto do Div</div>

</nabble_embed>

<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var meudiv = document.getElementById("nomedodiv")
var ctx = canvas.getContext("2d");
var ballRadiusX = 60;
var ballRadiusY = 12
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

function drawBall() {
meudiv.style.left = x + "px";
meudiv.style.top = y-328 +"px";
}

function draw() {
//    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    
    if(x + dx > canvas.width-ballRadiusX || x + dx < 0) {
        dx = -dx;
    }
    if(y + dy > canvas.height-(0.5 * ballRadiusY) || y + dy < ballRadiusY/2) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
}

setInterval(draw, 15);
</script>
    <style type="text/css">
      canvas { border: 1px solid white; background: #eee; }
    </style>