User Tools
sidebar
Verschillen
Dit geeft de verschillen weer tussen de geselecteerde revisie en de huidige revisie van de pagina.
|
sidebar [2007/10/23 10:16] hans |
sidebar [2017/10/11 15:48] (huidige) hans |
||
|---|---|---|---|
| Regel 3: | Regel 3: | ||
| * [[biedsysteem:pieter:start|Biedsysteem ]] | * [[biedsysteem:pieter:start|Biedsysteem ]] | ||
| * [[recept:start|Recepten]] | * [[recept:start|Recepten]] | ||
| - | * [[http://sampiemon.xs4all.nl/photo|Foto's]] | + | <html> |
| + | <canvas id="klokjevandehema" width="150" height="150"></canvas> | ||
| + | <style> | ||
| + | #canvas { | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | margin-left: -75px; | ||
| + | margin-top: -75px; | ||
| + | } | ||
| + | </style> | ||
| + | <script> | ||
| + | var canvas = document.getElementById("klokjevandehema"); | ||
| + | var ctx = canvas.getContext("2d"); | ||
| + | var radius = canvas.height / 2; | ||
| + | ctx.translate(radius,radius); | ||
| + | radius = radius * 0.90; | ||
| + | setInterval(tekenKlok, 1000); | ||
| + | |||
| + | function tekenKlok(){ | ||
| + | tekenOndergrond(ctx, radius); | ||
| + | tekenCijfers(ctx, radius); | ||
| + | tekenWijzers(ctx, radius); | ||
| + | } | ||
| + | |||
| + | function tekenOndergrond(ctx, radius){ | ||
| + | var grad; | ||
| + | |||
| + | ctx.beginPath(); | ||
| + | ctx.arc(0, 0, radius, 0, 2*Math.PI); | ||
| + | ctx.fillStyle = "#638800"; | ||
| + | ctx.fill(); | ||
| + | |||
| + | |||
| + | grad = ctx.createRadialGradient(0, 0, radius*0.8, 0, 0, radius*1.35); | ||
| + | grad.addColorStop(0, '#000'); | ||
| + | grad.addColorStop(0.5, '#FFF'); | ||
| + | grad.addColorStop(1, '#FFF'); | ||
| + | ctx.strokeStyle = grad; | ||
| + | ctx.lineWidth = radius*0.2; | ||
| + | ctx.stroke(); | ||
| + | |||
| + | ctx.beginPath(); | ||
| + | ctx.arc(0, 0, radius*0.05, 0, 2*Math.PI); | ||
| + | ctx.fillStyle = "white"; | ||
| + | ctx.fill(); | ||
| + | } | ||
| + | |||
| + | function tekenCijfers(ctx, radius) { | ||
| + | var ang; | ||
| + | var num; | ||
| + | ctx.font = radius*0.15 + "px arial"; | ||
| + | ctx.textBaseline="middle"; | ||
| + | ctx.textAlign="center"; | ||
| + | for(num= 1; num < 13; num++){ | ||
| + | ang = num * Math.PI / 6; | ||
| + | ctx.rotate(ang); | ||
| + | ctx.translate(0, -radius*0.80); | ||
| + | ctx.rotate(-ang); | ||
| + | ctx.fillText(num.toString(), 0, 0); | ||
| + | ctx.rotate(ang); | ||
| + | ctx.translate(0, radius*0.80); | ||
| + | ctx.rotate(-ang); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function tekenWijzers(ctx, radius) { | ||
| + | var nu = new Date(); | ||
| + | var uur = nu.getHours(); | ||
| + | var minuut = nu.getMinutes(); | ||
| + | var seconde = nu.getSeconds(); | ||
| + | //uurwijzer | ||
| + | uur=uur%12; | ||
| + | uur=(uur*Math.PI/6)+(minuut*Math.PI/(6*60))+(seconde*Math.PI/(360*60)); | ||
| + | tekenWijzer(ctx, uur, radius*0.4, radius*0.07); | ||
| + | //minutenwijzer | ||
| + | minuut=(minuut*Math.PI/30)+(seconde*Math.PI/(30*60)); | ||
| + | tekenWijzer(ctx, minuut, radius*0.6, radius*0.07); | ||
| + | // secondewijzer | ||
| + | seconde=(seconde*Math.PI/30); | ||
| + | tekenWijzer(ctx, seconde, radius*0.75, radius*0.02); | ||
| + | } | ||
| + | |||
| + | function tekenWijzer(ctx, positie, lengte, breedte) { | ||
| + | ctx.beginPath(); | ||
| + | ctx.lineWidth = breedte; | ||
| + | ctx.lineCap = "round"; | ||
| + | ctx.moveTo(0,0); | ||
| + | ctx.rotate(positie); | ||
| + | ctx.lineTo(0, -lengte); | ||
| + | ctx.stroke(); | ||
| + | ctx.rotate(-positie); | ||
| + | } | ||
| + | </script> | ||
| + | </html> | ||
sidebar.1193127415.txt.gz · Laatst gewijzigd: 2012/04/25 23:08 (Externe bewerking)
