<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html clock</title>
</head>
<body>
<canvas width="500" height="500" id="clock">
你的浏览器不支持canvas标签，时针显示不出来哦！
</canvas>
<script type="text/javascript">
//画布背景颜色
var clockbackgroundcolor = "#abcdef";
//时针颜色
var hourpointcolor = "#000";
//时针粗细
var hourpointwidth = 7;
//时针长度
var hourpointlength = 100;
//分针颜色
var minpointcolor = "#000";
//分针粗细
var minpointwidth = 5;
//分针长度
var minpointlength = 150;
//秒针颜色
var secpointcolor = "#f00";
//秒针粗细
var secpointwidth = 3;
//秒针长度
var secpointlength = 170;
//表盘颜色
var clockpanelcolor = "#abcdef";
//表盘刻度颜色
var scalecolor = "#000";
//表盘大刻度宽度 3 6 9 12
var scalebigwidth = 9;
//表盘大刻度的长度
var scalebiglength = 15;
//表盘小刻度的宽度
var scalesmallwidth = 5;
//表盘小刻度的长度
var scalesmalllength = 10;
//圆心颜色
var centercolor = 'red';
//时钟画布
var clock = document.getelementbyid('clock');
clock.style.background = clockbackgroundcolor;
//时针画布的作图环境（画板）
var panel = clock.getcontext('2d');
//画线
/**
*画线段
*
*
*/
function drowline(p,width,color,startx,starty,endx,endy,ran,cx,cy){
//保存传入的画板，相当于每次作画新开一个图层
p.save();
//设置画笔宽度
p.linewidth = width;
//设置画笔颜色
p.strokestyle = color;
//新开启作图路径，避免和之前画板上的内容产生干扰
p.beginpath();
p.translate(cx,cy);
//旋转
p.rotate(ran);
//移动画笔到开始位置
p.moveto(startx,starty);
//移动画笔到结束位置
p.lineto(endx,endy);
//画线操作
p.stroke();
//关闭作图路径，避免和之后在画板上绘制的内容产生干扰
p.closepath();
//在传入的画板对象上覆盖图层
p.restore();
}
/**
*画水平线
*/
function drowhorizontalline(p,width,length,color,startx,starty,ran,cx,cy){
drowline(p,width,color,startx,starty,startx+length,starty,ran,cx,cy);
}
/**
*画圈圈
*/
function drowcircle(p,width,color,centrex,centrey,r){
p.save();
//设置画笔宽度
p.linewidth = width;
//设置画笔颜色
p.strokestyle = color;
//新开启作图路径，避免和之前画板上的内容产生干扰
p.beginpath();
//画圈圈
p.arc(centrex,centrey,r,0,360,false);
//画线操作
p.stroke();
//关闭作图路径，避免和之后在画板上绘制的内容产生干扰
p.closepath();
//在传入的画板对象上覆盖图层
p.restore();
}
function drowpoint(p,width,color,centrex,centrey,r){
p.save();
//设置画笔宽度
p.linewidth = width;
//设置画笔颜色
p.fillstyle = color;
//新开启作图路径，避免和之前画板上的内容产生干扰
p.beginpath();
//画圈圈
p.arc(centrex,centrey,r,0,360,false);
//画线操作
p.fill();
//关闭作图路径，避免和之后在画板上绘制的内容产生干扰
p.closepath();
//在传入的画板对象上覆盖图层
p.restore();
}
function drowscales(p){
//画小刻度
for(var i = 0;i < 60;i++){
drowhorizontalline(p,scalesmallwidth,scalesmalllength,scalecolor,195-scalesmalllength,0,i*6*math.pi/180,250,250);
}
//画大刻度
for(var i = 0;i < 12;i++){
drowhorizontalline(p,i%3==0?scalebigwidth*1.2:scalebigwidth,i%3==0?scalebiglength*1.2:scalebiglength,scalecolor,195-scalebiglength,0,i*30*math.pi/180,250,250);
//可以添加数字刻度
}
}
function drowhourpoint(p,hour){
drowhorizontalline(p,hourpointwidth,hourpointlength,hourpointcolor,-10,0,(hour-3)*30*math.pi/180,250,250);
}
function drowminpoint(p,min){
drowhorizontalline(p,minpointwidth,minpointlength,minpointcolor,-15,0,(min-15)*6*math.pi/180,250,250);
}
function drowsecpoint(p,sec){
drowhorizontalline(p,secpointwidth,secpointlength,secpointcolor,-15,0,(sec-15)*6*math.pi/180,250,250);
}
function drowclock(){
panel.clearrect(0,0,500,500);
panel.filltext("",10,20);
panel.filltext("<a href="https://www.jb51.net",10,40">https://www.jb51.net",10,40</a>);
var date = new date();
var sec = date.getseconds();
var min = date.getminutes();
var hour = date.gethours() + min/60;
drowcircle(panel,7,'blue',250,250,200);
drowscales(panel);
drowhourpoint(panel,hour);
drowminpoint(panel,min);
drowsecpoint(panel,sec);
drowpoint(panel,1,centercolor,250,250,7);
//drowhorizontalline(panel,10,10,'red',-5,0,0,250,250);
}
//drowhorizontalline(panel,7,30,'#f00',0,0,math.pi,250,250);
drowclock();
setinterval(drowclock,1000);
function save(){
var image = clock.todataurl("image/png").replace("image/png", "image/octet-stream");
location.href=image;
}
</script>
</body>
</html>
我要评论
网友评论