<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
canvas{
background: #eee;
}
</style>
<script>
window.onload=function(){
var con=document.getElementById(‘con‘);
var oCanvas=con.getContext("2d");
var startX=200;
var startY=200;
var radius=100;
setInterval(function(){
oCanvas.clearRect(0, 0, 400, 400);
// 阴影
oCanvas.shadowColor="#888";
oCanvas.shadowOffsetX=1;
oCanvas.shadowOffsetY=1;
oCanvas.shadowBlur=3;
// 渐变
var grd=oCanvas.createRadialGradient(startX, startY,1, startX, startY,100);
grd.addColorStop(0, ‘#efefef‘);
grd.addColorStop(1, "#cecece");
oCanvas.fillStyle=grd;
oCanvas.lineWidth=5;
oCanvas.beginPath();
oCanvas.strokeStyle="#a34";
oCanvas.arc(startX, startY, radius, 0, 2*Math.PI);
oCanvas.stroke();
oCanvas.fill();
// 去掉阴影
oCanvas.shadowColor="#888";
oCanvas.shadowOffsetX=0;
oCanvas.shadowOffsetY=0;
oCanvas.shadowBlur=0;
// 画刻度
dragMark();
var myDate=new Date();
var H=myDate.getHours()*30-90;
var M=myDate.getMinutes()*6-90;
var S=myDate.getSeconds()*6-90;
// 时针
dragT("#000",4,55,H);
// 分针
dragT("#888",3,65,M);
// 秒针
dragT("#f10",2,80,S);
// 画中心点
oCanvas.beginPath();
oCanvas.fillStyle="#ccc";
oCanvas.arc(200, 200, 6, 0, 2*Math.PI);
oCanvas.fill();
}, 1000);
function dragT(color,lw,radius,angle){
oCanvas.beginPath();
oCanvas.strokeStyle=color;
oCanvas.lineWidth=lw;
oCanvas.moveTo(startX, startY);
oCanvas.lineTo(startX+radius*Math.cos(angle*Math.PI/180), startY+radius*Math.sin(angle*Math.PI/180));
oCanvas.stroke();
}
function dragMark(){
for(var i = 0; i < 60; i++) {
var lw=2;
var radius1=radius-5;
oCanvas.strokeStyle="#888";
if (i%5==0) {
radius1=radius-8;
lw=3;
oCanvas.strokeStyle="#666";
};
oCanvas.lineWidth=lw;
var angle=i*6*Math.PI/180;
oCanvas.beginPath();
oCanvas.moveTo(startX+radius*Math.cos(angle), startX+radius*Math.sin(angle));
oCanvas.lineTo(startX+radius1*Math.cos(angle), startX+radius1*Math.sin(angle));
oCanvas.stroke();
};
}
}
</script>
</head>
<body>
<canvas width="400" height="400" id="con"></canvas>
</body>
</html>
效果图~
时间： 2025-01-09 08:56:52