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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

来源：易贤网阅读：1461 次日期：2016-07-11 11:09:48

温馨提示：易贤网小编为您整理了“html5 canvas实现圆形时钟代码分享”,方便广大网友查阅！

html5canvas实现的时钟，大家参考使用吧

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>HTML CLOCK</title>

</head>

<body>

你的浏览器不支持canvas标签，时针显示不出来哦！

</canvas>

//画布背景颜色

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="http://www.jb51.net",10,40">http://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>

上一篇：html5的canvas实现3d雪花飘舞效果

下一篇：html5 css3网站菜单实现代码

易贤网手机网站地址：html5 canvas实现圆形时钟代码分享

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！