html5 canvas实现圆形时钟实例代码

!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 12var 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>
    

【相关推荐】

1. HTML5开发手机应用-详细介绍viewport的作用（图文）

2. 浅谈html5 响应式布局

3. HTML5 程序设计

4. 小程序开发之利用co处理异步流程的实例教程

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！