利用canvas画一个动态时钟

Posted 啦啦12345

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用canvas画一个动态时钟相关的知识，希望对你有一定的参考价值。

目标：利用canvas画布画一个动态时钟，根据目前的时间可以实时更新的，可以在过程中添加一些效果，比如让时钟外围的一圈颜色渐变，时钟上的数字颜色改变，时钟的指针颜色改变。。。

设置一个定时器

先放上一张效果图，参考一下

先建一个画布，写好样式

<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{　　　　//设置div的text-align为center，margin-top
text-align: center;
margin-top: 150px;
}
canvas{　　　　//设置一下画布的边框
border: 1px solid #000;
}
</style>

<div>　　　　//设置一下画布的宽高
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");　　　　　　//画布一般都是2d的

var width = canvas.width;　　　　　　　　　　//时钟的宽高等于画布的宽高，设置时钟的半径为画布的一半，这样时钟就可以包含在画布里面
var height = canvas.height;

var r = height/2;

//接下来开始准备画圆，画圆的时候给圆加了渐变色，根据个人喜好，渐变色加在其他地方也可以，本人是把渐变色加在了这里

var r1 = Math.floor(Math.random()*256);　　　　//让颜色随机，刷新一下就可以变其他的颜色
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
var grd=ctx.createLinearGradient(0,0,0,r);

//函数

ctx.save()　　　　　　//保存
ctx.translate(r,r);　　　　　　
ctx.beginPath();　　　　　　　　　　　　　　　　//开始路径
ctx.arc(0,0,r-5,0,Math.PI*2,false);　　　　　　　　//画圆（原点坐标，半径设置的可以少一些，因为要加上框的大小，让圆在画布的宽高里面，整个圆，方向设置为顺时针，逆时针都可以）
ctx.closePath();　　　　　　　　　　　　　　　　//关闭路径
ctx.lineWidth = 10;　　　　　　　　　　　　　　　//设置圆的线宽为10
grd.addColorStop(0,"rgb("+r1+","+g1+","+b1+")");　　　　//设置的渐变色，可以设置的细腻一点，这里我是从0-0.25-0.5-0.75-1设置的
grd.addColorStop(0.25,"rgb("+b1+","+g1+","+r1+")");
grd.addColorStop(0.5,"rgb("+g1+","+b1+","+r1+")");
grd.addColorStop(0.75,"rgb("+g1+","+b1+","+r1+")");
grd.addColorStop(1,"rgb("+g1+","+b1+","+r1+")");
ctx.strokeStyle=grd;　　　　　　　　　　　　//渐变色
ctx.stroke();　　　　　　//

　//下面开始添加时钟上面的数字，圆一般是从0也就是时钟的指针3那里开始，把这些数字放在一个数组里面，设置一下数字的字体大小，样式，

var hoursnum = [3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

　//下面开始设置时钟上数字的颜色

for(var i = 0;i < hoursnum.length;i++){
var rad = 2 * Math.PI / 12 * i; 　　　　　//一整个圆，一共有12个数字，算出数字所在位置的弧度
var x = Math.cos(rad) * (r - 30);　　　　//判断数字的坐标，例如数字4，x=cos30度，y=sin30度，
var y = Math.sin(rad) * (r - 30);
ctx.fillText(hoursnum[i],x,y)　　　　　　　　　　
ctx.fillStyle = "red";　　　　　　　　　　//可以设置一下颜色，在此处我设置的红色
}

//现在开始设置数字之间的小间隙，此处实际上代表的是分的颜色

for(var j = 0;j < 60;j++){
var rad = 2 * Math.PI / 60 * j;
var x = Math.cos(rad) * (r - 15);
var y = Math.sin(rad) * (r - 15);
ctx.beginPath(); 　　　　　　　　//开始路径
if(j % 5 === 0){
ctx.fillStyle = "lightpink"; 　　　　//把间隙之间的颜色判断一下，设置不同的颜色，容易分辨
}else{
ctx.fillStyle = "darkred"
}
ctx.arc(x,y,2,0,Math.PI*2)
ctx.closePath();　　　　　　　　//结束路径
ctx.fill()
}

//设置时针

ctx.save();
ctx.beginPath();
ctx.lineWidth = 6;
var rad = Math.PI * 2 / 12 * hour;
var rad_minu = Math.PI * 2 / 12 / 60 * minu;　　　　//分针对时针会有影响，设置一下，消除分针对时针的影响
ctx.rotate(rad + rad_minu);
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.lineCap="round";　　　　//使用linecap属性给两端稍加一点弧度,看起来不是那么生硬
ctx.strokeStyle = "darkred";
ctx.stroke()
ctx.restore()

//设置分针

ctx.save();
ctx.beginPath();
ctx.lineWidth = 4;
var rad = Math.PI * 2 / 60 * minu;
ctx.rotate(rad)
ctx.moveTo(0,10);
ctx.lineTo(0,-r+50);
ctx.lineCap="round";
ctx.strokeStyle = "#F0f101";
ctx.stroke()
ctx.restore()

//设置秒针

ctx.save();
var rad = Math.PI * 2 / 60 * seco;
ctx.beginPath();
ctx.rotate(rad)
ctx.fillStyle = "pink";
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1,-r+20);
ctx.lineTo(-1,-r+20);
ctx.closePath()
ctx.fill()
ctx.restore()

//设置一个圆，把时针，分针，秒针固定着，看起来视觉效果好一些

ctx.beginPath();
ctx.fillStyle = "#f00";　　　　　　//记得设置一个颜色
ctx.arc(0,0,5,0,Math.PI*2);
ctx.closePath();
ctx.fill()

//设置定时器，调用上面的时针，分针，秒针的函数

function draw(){
ctx.clearRect(0,0,width,height);
var datenow = new Date();
var hour = datenow.getHours();
var minu = datenow.getMinutes();
var seco = datenow.getSeconds();

fun()
drawHour(hour,minu)
drawMinu(minu)
drawSeco(seco)
drawDot()
ctx.restore()
}
draw()
setInterval(draw,1000)

此处附上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                text-align: center;
                margin-top: 150px;
            }
            canvas{
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="500px" height="500px"></canvas>
        </div>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var width = canvas.width;
            var height = canvas.height;
            var r = height/2;
            var r1 = Math.floor(Math.random()*256);
            var g1 = Math.floor(Math.random()*256);
            var b1 = Math.floor(Math.random()*256);
            var grd=ctx.createLinearGradient(0,0,0,r);
            
            function fun(){
                ctx.save()
                ctx.translate(r,r);
                ctx.beginPath();
                ctx.arc(0,0,r-5,0,Math.PI*2,false);
                ctx.closePath();
                ctx.lineWidth = 10;
                grd.addColorStop(0,"rgb("+r1+","+g1+","+b1+")");
                grd.addColorStop(0.25,"rgb("+b1+","+g1+","+r1+")");
                grd.addColorStop(0.5,"rgb("+g1+","+b1+","+r1+")");
                grd.addColorStop(0.75,"rgb("+g1+","+b1+","+r1+")");
                grd.addColorStop(1,"rgb("+g1+","+b1+","+r1+")");
                ctx.strokeStyle=grd;
                ctx.stroke();
                
                var hoursnum = [3,4,5,6,7,8,9,10,11,12,1,2];
                ctx.font = "20px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                
                for(var i = 0;i < hoursnum.length;i++){
                    var rad = 2 * Math.PI / 12 * i;   
                    var x = Math.cos(rad) * (r - 30);
                    var y = Math.sin(rad) * (r - 30);
                    ctx.fillText(hoursnum[i],x,y)
                    ctx.fillStyle = "red";
                }
                
                for(var j = 0;j < 60;j++){
                    var rad = 2 * Math.PI / 60 * j;   
                    var x = Math.cos(rad) * (r - 15);
                    var y = Math.sin(rad) * (r - 15);
                    ctx.beginPath();            
                    if(j % 5 === 0){
                        ctx.fillStyle = "darkred";    
                    }else{
                        ctx.fillStyle = "lightpink"
                    }
                    ctx.arc(x,y,2,0,Math.PI*2)
                    ctx.closePath();
                    ctx.fill()
                }
                
            }
            function drawHour(hour,minu){
                ctx.save();     
                ctx.beginPath();
                ctx.lineWidth = 6;
                var rad = Math.PI * 2 / 12 * hour;
                var rad_minu = Math.PI * 2 / 12 / 60 * minu;
                ctx.rotate(rad + rad_minu);
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r/2);
                ctx.lineCap="round";
                ctx.strokeStyle = "darkred";
                ctx.stroke()
                ctx.restore()  
            }
            
            function drawMinu(minu){
                ctx.save();     
                ctx.beginPath();
                ctx.lineWidth = 4;
                var rad = Math.PI * 2 / 60 * minu;
                ctx.rotate(rad)
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r+50);
                ctx.lineCap="round";
                ctx.strokeStyle = "#F0f101";
                ctx.stroke()
                ctx.restore()   
            }
            function drawSeco(seco){
                ctx.save();     
                var rad = Math.PI * 2 / 60 * seco;
                ctx.beginPath();
                ctx.rotate(rad)
                ctx.fillStyle = "pink";
                ctx.moveTo(-2,20);
                ctx.lineTo(2,20);
                ctx.lineTo(1,-r+20);
                ctx.lineTo(-1,-r+20);
                ctx.closePath()
                ctx.fill()
                ctx.restore()   
            }
            
            function drawDot(){
                ctx.beginPath();
                ctx.fillStyle = "#f00";
                ctx.arc(0,0,5,0,Math.PI*2);
                ctx.closePath();
                ctx.fill()
            }
            
            function draw(){
                ctx.clearRect(0,0,width,height);
                var datenow = new Date();
                var hour = datenow.getHours();
                var minu = datenow.getMinutes();
                var seco = datenow.getSeconds();
                
                fun()
                drawHour(hour,minu)
                drawMinu(minu)
                drawSeco(seco)
                drawDot()
                ctx.restore()
            }
            draw()
            setInterval(draw,1000)
        </script>
    </body>
</html>

 

以上是关于利用canvas画一个动态时钟的主要内容，如果未能解决你的问题，请参考以下文章

用canvas绘制一个简易时钟

H5之canvas-绘制动态时钟

canvas：动态时钟

canvas 画一个小时钟

使用 canvas画时钟

超详细，用canvas在微信小程序上画时钟教程