javascript - Moving a canvas element around on webpage -
i have local web server on raspberry pi using kiosk rotating photos. trying include coolclock.js script on page have working, canvas clock lives in move when photo changes doesn't burned in on tv pi hooked to. cannot clock move on page though...
function rotateimages() { var canvas = document.getelementbyid('clockid'); alert(canvas.style.top); alert(canvas.style.left); if(last==1){ document.body.style.backgroundimage='url('+preloads2.src+')'; num=math.floor(math.random()*preloads.length); preloads1.src=preloads[num]; last=2; canvas.style.top = '0px'; canvas.style.left = '0px'; } else{ document.body.style.backgroundimage='url('+preloads1.src+')'; num=math.floor(math.random()*preloads.length); preloads2.src=preloads[num]; last=1; canvas.style.top = '500px'; canvas.style.left = '500px'; } } var myvar=setinterval(function(){rotateimages()}, speed); </script> <!--[if ie]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script src="coolclock.js" type="text/javascript"></script> <script src="moreskins.js" type="text/javascript"></script> </head> <body onload="coolclock.findandcreateclocks()"> <canvas id="clockid" class="coolclock::50::-4"></canvas> </body> </html> the clock works, images rotate, , alerts show style.left , top changing way expect, clock doesn't budge. have update or refresh in order activate new position? i've found lots of things explain how move elements around coded (i think) same have, no examples of canvases - maybe canvas doesn't work way?
thanks!
you have make sure canvas has style position, , value should fixed, absolute or relative, style.left/right/top/bottom work. if don't assign position value canvas's style, it's default static. , top, right, bottom, left , z-index properties not apply on elements position static.
i've created snippet show how works. can find more mdn-style-position
var i; var cv, ctx, grd; (i = 1; <= 3; ++i) { cv = document.getelementbyid('move' + i); ctx = cv.getcontext('2d'); grd = ctx.createradialgradient(75, 75, 10, 75, 75, 75); grd.addcolorstop(0, 'red'); grd.addcolorstop(0.2, 'red'); grd.addcolorstop(0.4, 'yellow'); grd.addcolorstop(0.6, 'green'); grd.addcolorstop(0.8, 'blue'); grd.addcolorstop(1, 'purple'); ctx.fillstyle = grd; ctx.fillrect(0, 0, 150, 150); } var last = false; // alter each canvas' top style change position. setinterval(function(){ var cv, ctx, grd; var top = last ? '300px': ''; last = !last; (i = 1; <= 3; ++i) { cv = document.getelementbyid('move' + i); cv.style.top = top; } }, 1000);#move1 {} #move2 { position: relative; } #move3 { position: absolute; }<canvas id="move1" width="150" height="150"></canvas><!-- position default: static --> <canvas id="move2" width="150" height="150"></canvas><!-- position relative--> <canvas id="move3" width="150" height="150"></canvas><!-- position absolute -->
Comments
Post a Comment