html5 canvas实现圆形时钟代码分享

2020-03-24 18:51:01

字体：大中小

来源：转载

供稿：网友

复制代码代码如下:
!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 i++){
drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);
}
//画大刻度
for(var i = 0;i 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="http://www.phpstudy.net",10,40" http://www.phpstudy.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
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：DHTML幻灯片播放程序（一）

下一篇：HTML中表格是如何操作制成的？（代码示例）