<!DOCTYPE html>਍ഀ
<html lang="ja">਍ഀ
<head>਍ഀ
<meta charset="utf-8">਍ഀ
<title>canvas 要素の機能</title>਍ഀ
<style>canvas{ border: 1px solid black; }</style>਍ഀ
<!--[if IE]><script src="./excanvas.js"></script><![endif]-->਍ഀ
<script>਍ഀ
਍ഀ
function drawScreen(){਍ഀ
	var canvas = document.getElementById( "myCanvas" );਍ഀ
	var myContext = canvas.getContext( "2d" );਍ഀ
਍ഀ
        var now = new Date();਍ഀ
	var s = now.getHours();਍ഀ
	var theta = 2 * Math.PI * s / 12 - Math.PI / 2;਍ഀ
਍ഀ
	myContext.clearRect( 0, 0, 640, 480 );਍ഀ
਍ഀ
	myContext.beginPath();਍ഀ
	myContext.moveTo( 320, 240 );਍ഀ
	myContext.lineTo( 320 + 100 * Math.cos( theta ),਍ഀ
	                  240 + 100 * Math.sin( theta ) );਍ഀ
	myContext.stroke();਍ഀ
਍ഀ
	setTimeout( 'drawScreen()', 720000 );਍ഀ
਍ഀ
	var now = new Date();਍ഀ
	var s = now.getMinutes();਍ഀ
	var theta = 2 * Math.PI * s / 60 - Math.PI / 2;਍ഀ
਍ഀ
	myContext.clearRect( 0, 0, 640, 480 );਍ഀ
਍ഀ
	myContext.moveTo( 320, 240 );਍ഀ
	myContext.lineTo( 320 + 150 * Math.cos( theta ),਍ഀ
	                  240 + 150 * Math.sin( theta ) );਍ഀ
        myContext.strokeStyle = "#666666";਍ഀ
        myContext.stroke();਍ഀ
਍ഀ
	setTimeout( 'drawScreen()', 60000 );਍ഀ
਍ഀ
        var now = new Date();਍ഀ
	var s = now.getSeconds();਍ഀ
	var theta = 2 * Math.PI * s / 60 - Math.PI / 2;਍ഀ
਍ഀ
	myContext.clearRect( 0, 0, 640, 480 );਍ഀ
਍ഀ
	myContext.moveTo( 320, 240 );਍ഀ
	myContext.lineTo( 320 + 200 * Math.cos( theta ),਍ഀ
	                  240 + 200 * Math.sin( theta ) );਍ഀ
        myContext.stroke();਍ഀ
	਍ഀ
਍ഀ
	setTimeout( 'drawScreen()', 33 );਍ഀ
਍ഀ
        myContext.beginPath();਍ഀ
	myContext.arc( 320, 240 , 5, 0, 2 * Math.PI, false );਍ഀ
	myContext.fillStyle = "#FF0000";਍ഀ
	myContext.fill();਍ഀ
਍ഀ
	myContext.beginPath();਍ഀ
	myContext.arc( 320, 240, 210, 0, 2 * Math.PI, true );਍ഀ
	myContext.stroke();਍ഀ
਍ഀ
}਍ഀ
਍ഀ
</script></head>਍ഀ
<body onload="drawScreen();">਍ഀ
<canvas id="myCanvas" width="640" height="480">਍ഀ
このブラウザは canvas 要素に対応していません。਍ഀ
</canvas>਍ഀ
</body>਍ഀ
</html>