基于canvas实现钟表

2 篇文章 0 订阅

原理说明

1、通过arc方法实现钟表外环;
2、通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针;
3、通过font方法实现在画布上绘制文字,基于save和restore方法旋转绘制的文字,使文字正向显示。

实例效果图如下
在这里插入图片描述
绘制钟表圆形边框方法,centerX表示圆中心点x坐标,centerY表示圆中心店y坐标

function drawClockBall (centerX,centerY) {
    ctx.strokeStyle = centerBallColor;
    ctx.lineWidth = centerBallRange;
    ctx.beginPath();
    ctx.arc(centerX,centerY,centerBallRadius + centerBallRange / 2,0,2 * Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeStyle = outerBallColor;
    ctx.lineWidth = outerBallRange;
    ctx.beginPath();
    ctx.arc(centerX,centerY,centerBallRadius + centerBallRange + outerBallRange / 2,0,2 * Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeStyle = centerBallColor;
    ctx.lineWidth = outerLineWidth;
    ctx.beginPath();
    ctx.arc(centerX,centerY,centerBallRadius + centerBallRange + outerBallRange,0,2 * Math.PI);
    ctx.closePath();
    ctx.stroke();
}

绘制3,6,9,12时刻刻度和文字方法,rotate表示图形旋转角度,centerX表示图形绘制中心点x坐标,centerY表示图形绘制中心店y坐标

function drawClockSpecialMark(rotate,centerX,centerY){
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate(rotate * Math.PI / 180)
    ctx.fillStyle = clockMarkColor;
    ctx.beginPath();
    ctx.arc(0,-centerBallRadius + clockMarkWidth * 2,clockMarkCircleRadius,0,2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  
    ctx.translate(0,-centerBallRadius + clockMarkWidth * 3 + fontSize);
    ctx.rotate(-rotate * Math.PI / 180)
    ctx.font = fontSize + 'px bold 黑体';
    ctx.fillStyle = fontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(parseInt(rotate / 30), 0, 0);
    ctx.restore();
}

绘制非3,6,9,12时刻刻度和文字方法,rotate表示图形旋转角度,lineWidth表示刻度线条宽度,range表示刻度之间的差值,centerX表示图形绘制中心点x坐标,centerY表示图形绘制中心店y坐标

function drawClockIntMark(rotate,lineWidth,range,centerX,centerY) {
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate(rotate * Math.PI / 180)
    ctx.strokeStyle = clockMarkColor;
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.moveTo(0,-centerBallRadius + clockMarkWidth);
    ctx.lineTo(0,-centerBallRadius + clockMarkWidth * 3 - range);
    ctx.stroke();
    if (rotate % 30 == 0) {
        ctx.translate(0,-centerBallRadius + clockMarkWidth * 3 + fontSize);
        ctx.rotate(-rotate * Math.PI / 180)
        ctx.font = fontSize + 'px bold 黑体';
        ctx.fillStyle = fontColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(parseInt(rotate / 30), 0, 0);
        }
    ctx.restore();
}

绘制时钟时针,分针,秒针方法,centerX表示圆中心点x坐标,centerY表示圆中心店y坐标

function drawIndicatorFun(centerX,centerY) {
    var newDate = new Date();
    var currentHour = newDate.getHours();
    var currentMinute = newDate.getMinutes();
    var currentSecond = newDate.getSeconds();
    ctx.fillStyle = indicatorColor;
    ctx.beginPath();
    ctx.arc(centerX,centerY,indicatorBallRadius,0,2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.arc(centerX,centerY,indicatorBallRadius - 3,0,2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    // 时针
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate((currentHour * 30 + currentMinute / 60 * 30) * Math.PI / 180)
    ctx.strokeStyle = indicatorColor;
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(0,25)
    ctx.lineTo(0,-centerBallRadius + clockMarkWidth * 12,clockMarkCircleRadius)
    ctx.stroke();
    ctx.restore();
    // 分针
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate((currentMinute * 6 + currentSecond / 60 * 6) * Math.PI / 180)
    ctx.strokeStyle = indicatorColor;
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(0,25)
    ctx.lineTo(0,-centerBallRadius + clockMarkWidth * 3,clockMarkCircleRadius)
    ctx.stroke();
    ctx.restore();
    // 秒针
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate((currentSecond * 6) * Math.PI / 180)
    ctx.strokeStyle = indicatorSecondColor;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0,25)
    ctx.lineTo(0,-centerBallRadius + clockMarkWidth * 3,clockMarkCircleRadius)
    ctx.stroke();
    ctx.restore();
}

实例预览地址:基于canvas实现钟表

后话

希望上述讲解对您有帮助!!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值