首页 > 代码库 > canvas时钟绘制

canvas时钟绘制

2024-08-19 06:56:06   219人阅读

index.html


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        div{
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" width="400" height="400" style="border:1px solid #ccc;"></canvas>
    </div>
        <script src="http://www.mamicode.com/shizhong.js"></script>
</body>
</html>


shizhong.js

var dom=document.getElementById(‘clock‘);
var ctx=dom.getContext(‘2d‘);
var width=ctx.canvas.width;//定义宽度
var height=ctx.canvas.height;//定义高度
var r=width /2;//定义半径
var rem=width /200;//定义钟的大小变化


//绘制外圆
function dranbackground(){

    ctx.save();//保存当前环境状态


    ctx.translate(r,r);//调动或移动
    ctx.beginPath();//起始路径
    ctx.lineWidth=10 *rem;//设置线条宽度
    ctx.arc(0,0,r-ctx.lineWidth /2 ,0,2*Math.PI,false);//绘制弧形：X=0,Y=0,半径减去ctx.lineWidth/2宽度，起始路径，终点路径，为顺时针旋转

    ctx.stroke();//绘制线条

// 绘制数字
    var hours=[3,4,5,6,7,8,9,10,11,12,1,2];//12个小时
    ctx.font=18 *rem+ ‘px Arial‘;//字体属性
    ctx.textAlign=‘center‘;//左右对齐
    ctx.textBaseline=‘middle‘;//上下对齐
    hours.forEach(function(number,i){
        var rad=2*Math.PI/12*i;//每一个小时数的弧度*i
        var x=Math.cos(rad)*(r-30 *rem);
        var y=Math.sin(rad)*(r-30 *rem);

        ctx.fillText(number,x,y);//在画布上绘制被填充的文本（文本，X轴，Y轴）
    });


//绘制妙钟点
    for(var i=0;i<60;i++){
        var rad=2*Math.PI/60*i;//每一个妙数的弧度*i
        var x=Math.cos(rad)*(r-18*rem);
        var y=Math.sin(rad)*(r-18*rem);
        ctx.beginPath();//起始点
        //这条IF涵数是如果每隔5个小时的填充为黑色，否则为灰色
        if(i%5===0){
            ctx.fillStyle=‘#000‘;
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        } else{
            ctx.fillStyle=‘#ccc‘;
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }

        ctx.fill();//绘制填充
    }
}

//绘制时针
function dranhour(hour,minute){
    ctx.save();//保存当前环境状态
    ctx.beginPath();//起点
    var rad=2*Math.PI/12*hour;//弧度为圆圈/60秒*时针1点
    var mrad=2*Math.PI/12/60*minute;//弧度为圆圈/60秒*分针30分
    ctx.rotate(rad+mrad);//旋转为时针弧度+分针弧度
    ctx.lineWidth=6*rem;//线条宽度为6
    ctx.lineCap=‘round‘;//线条变圆
    ctx.moveTo(0,10);//从X为0到Y为10
    ctx.lineTo(0,-r/2);//画到X为0到Y为-R/2长度 
    ctx.stroke();//绘制线条
    ctx.restore();//返回之前保存过的路径状态和属性
}
//绘制分针
function dranminute(minute){
    ctx.save();//保存当前环境状态
    ctx.beginPath();//起点
    var rad=2*Math.PI/60*minute;//弧度为圆圈/60秒*分针30分
    ctx.rotate(rad);//旋转为分针弧度
    ctx.lineWidth=3*rem;//线条宽度为3
    ctx.lineCap=‘round‘;//线条变圆
    ctx.moveTo(0,10*rem);//从X为0到Y为10
    ctx.lineTo(0,-r+30*rem);//画到X为0到Y为-R+30长度
    ctx.stroke();//绘制线条
    ctx.restore();//返回之前保存过的路径状态和属性
}
//绘制妙针
function dransecond(second){
    ctx.save();//保存当前环境状态
    ctx.beginPath();//起点 
    ctx.fillStyle=‘red‘;//填充为红色
    var rad=2*Math.PI/60*second;//弧度为圆圈/60秒*秒针15秒
    ctx.rotate(rad);//旋转秒针弧度
    ctx.moveTo(-2*rem,20*rem);//从X为-2到Y为20
    ctx.lineTo(2*rem,20*rem);//画到X为2到Y为20长度
    ctx.lineTo(1,-r+18*rem);//画到X为1到Y为-R+18长度
    ctx.lineTo(-1,-r+18*rem);//画到X为-1到Y为-R+18长度
    ctx.fill();//绘制填充
    ctx.restore();//返回之前保存过的路径状态和属性
}
//绘制时针、分针、妙针中的白色圆点
function drandot(){
    ctx.beginPath();//起点
    ctx.fillStyle=‘#fff‘;//填充为白色
    ctx.arc(0,0,3*rem,0,2*Math.PI,false);//X轴为0，Y轴为0，半径为3，起点为0，终点为2*Math.PI（圆圈），为顺时针
    ctx.fill();//绘制填充
}


function dran(){
    ctx.clearRect(0,0,width,height);//清空指定图形像素
    var now=new Date();//获取当前时间
    var hour=now.getHours();//执行当前时针
    var minute=now.getMinutes();//执行当前分针
    var second=now.getSeconds();//执行当前秒针
    dranbackground();//变量外圆值
    dranhour(hour,minute);//变量时针值 
    dranminute(minute);//变量分针值
    dransecond(second);//变量妙针值
    drandot();//变量中心圆点值

    ctx.restore();//返回之前保存过的路径状态和属性
}

dran();//先执行一次
setInterval(dran,1000)//每秒执行一次

 

canvas时钟绘制


联系
我们