+
2
|
list
|
skin
|
login
|
editor
α-wwwiki
::
clock
user:none
(3028 bytes)
{canvas {@ id="clock" width="540" height="540" style="background:#ffe;"}} {div {@ style="float:right"} {input {@ type="submit" value="start" onclick="°° var context = null; var h = 0; var min = 0; var sec = 0; var msec = 0; var wth = 0; var hth = 0; getId('clock').innerHTML = draw(); function draw () { var canvas = getId('clock'); wth = canvas.width; hth = canvas.height; context = canvas.getContext('2d'); window.timer = window.setInterval(updateClock,100); // a global var used in button 'stop' } function updateClock(){ getTime(); drawClock(); } function getTime(){ var date = new Date(); h = date.getHours(); min = date.getMinutes(); sec = date.getSeconds(); msec = date.getMilliseconds(); } function drawClock(){ context.save(); context.translate(wth/2,hth/2); context.clearRect(-hth/2,-hth/2,hth,hth); context.restore(); drawClockCase(); drawClockPointer(); } function drawClockCase(){ context.save(); context.fillStyle = 'rgb(183, 203, 227)'; context.translate(wth/2,hth/2); for(var m =0;m< 12;m++){ context.rotate(Math.PI*2/(12)); context.fillRect(-5,-(hth/2-20),10,50); } for(var n =0;n< 60;n++){ context.rotate(Math.PI*2/(60)); context.fillRect(-2,-(hth/2-20),4,20); } context.restore(); context.save(); context.lineWidth =20; context.strokeStyle = 'rgba(111, 164, 122, 0.6)'; context.beginPath(); context.arc(wth/2, hth/2, hth/2-20, 0, Math.PI*2, true); context.closePath(); context.stroke(); context.restore(); } function drawClockPointer(){ //Hours context.save(); context.fillStyle = 'rgba(93, 94, 96,0.99)'; context.translate(wth/2,hth/2); context.rotate(Math.PI*2/(43200/(h*60*60+min*60+sec))); context.fillRect(-12,-hth/4,24,hth/4); context.restore(); //Minutes context.save(); context.fillStyle = 'rgba(93, 94, 96,0.99)'; context.translate(wth/2,hth/2); context.rotate(Math.PI*2/(3600000/(min*60000+sec*1000+msec))); context.fillRect(-10,-3*hth/8,20,3*hth/8); context.restore(); //Seconds context.save(); context.fillStyle = 'rgba(255, 154, 105,0.99)'; context.translate(wth/2,hth/2); context.rotate(Math.PI*2/(60/sec)); context.fillRect(-8,-34*hth/80,16,34*hth/80+45); context.restore(); // Middle Point context.save(); context.fillStyle = 'rgba(50,50,50,0.99)'; context.beginPath(); context.arc(wth/2, hth/2, 20, 0, Math.PI*2, true); context.closePath(); context.fill(); context.restore(); } °°"}} {br} {input {@ type="submit" value="stop" onclick="window.clearInterval( window.timer );" } } } _p Based on this [[source|http://www.flobii-cc.com/2011/07/how-to-use-html5-canvas.html]], open the editor to see the adaptation to the wiki.