<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#eee;
}
</style>
<title>時鐘</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
var originx=200;
var originy=200;
var radius=100;
//陰影
cobj.shadowColor="#888";
cobj.shadowOffsetX=1;
cobj.shadowOffsetY=1;
cobj.shadowBlur=3;//模糊效果
//漸變色
var colorObj=cobj.createRadialGradient(originx,originy,1,originx,originy,100);
colorObj.addColorStop(0,"#efefef");
colorObj.addColorStop(1,"#cecece");
cobj.fillStyle=colorObj;
cobj.lineWidth=8;
cobj.beginPath();
cobj.strokeStyle=colorObj;
cobj.arc(originx,originy,radius,0,2*Math.PI);
cobj.stroke();
cobj.fill();
//去掉陰影
cobj.shadowColor="#888";
cobj.shadowOffsetX=0;
cobj.shadowOffsetY=0;
cobj.shadowBlur=0;
//畫刻度
drawMark ()
//畫刻度的函數
function drawMark () {
for (var i=0; i<60; i++) {
var angle=i*6*Math.PI/180;
var radius1=radius-4;
var lw=2;
if(i%5==0){
radius1=radius-8;
lw=4
}
cobj.strokeStyle="#888";
cobj.lineWidth=lw;
cobj.beginPath();
cobj.moveTo(originx+radius*Math.cos(angle),originy+radius*Math.sin(angle));
cobj.lineTo(originx+(radius1)*Math.cos(angle),originy+(radius1)*Math.sin(angle));
cobj.stroke();
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400>
</canvas>
</body>
</html>
