<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas test</title>
</head>
<body>
<div class="wrap">
<canvas id="canvas" width="400px" height="300px" style="border: 1px solid red;">
</canvas>
</div>
<script type="text/javascript">
window.onload = draw;
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var deg=*Math.PI/;
var context = canvas.getContext("2d");
context.clearRect(,,,)
context.save();
context.beginPath();
context.arc(, , , , * Math.PI, true);
context.stroke();
context.closePath();
context.beginPath();
context.arc(, , , , * Math.PI, true);
context.stroke();
context.closePath();
context.save();
context.translate(,)
context.beginPath();
for(var i=;i<;i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
context.fillStyle="#000";
context.font="bold 20px Calibri";
context.textAlign='center';
context.textBaseline='middle';
context.fillText(i,x1*,y1*);
}
context.stroke();
context.closePath();
context.restore();
context.save();
context.translate(,)
var deg1=*Math.PI/;
context.beginPath();
for(var i=;i<;i++){
var x2=Math.sin(i*deg1);
var y2=-Math.cos(i*deg1);
context.moveTo(x2*,y2*);
context.lineTo(x2*,y2*);
}
context.strokeStyle='#000';
context.lineWidth=;
context.stroke();
context.closePath();
context.restore();
context.translate(,)
start(context)
setTimeout(draw,);
}
}
function start(context){
var date = new Date();
var seconds = date.getSeconds()**Math.PI/;
var minutes = date.getMinutes()**Math.PI/+seconds/;
var hour =(date.getHours()%)**Math.PI/+minutes/+seconds/;
drawLine(context,hour,-,);
drawLine(context,minutes,-,);
drawLine(context,seconds,-,);
context.restore();
context.restore();
}
function drawLine(context,mintues,endpoint,width){
context.save();
context.beginPath();
context.rotate(mintues);
context.moveTo(,);
context.lineTo(,endpoint);
context.strokeStyle="black";
context.lineWidth=width;
context.stroke();
context.closePath();
context.restore();
}
</script>
</body>
</html>
最後效果如下：
![js實作簡單電腦[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)