canvas画实时钟表,包括表盘

 有详细注释, 直接copy可看到效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小小八毛钟表</title>
    <style>
        .box {
            width: 450px;
            height: 450px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <canvas id="canvas"></canvas>
    </div>
</body>

</html>
<script>
    //初始化
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d');
    canvas.width = 420
    canvas.height = 420
    setInterval(() => {

    // 画表盘
    // 一分钟刻度,每6度一分钟,即一个刻度
    ctx.beginPath();
    for (var i = 0; i < 60; i++) {
        ctx.moveTo(200, 200);
        ctx.arc(210, 210, 200, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180);
    }
    ctx.strokeStyle = 'black';
    ctx.stroke()

    // 一分钟刻度中间多余的用圆盖住,只留最外一圈的刻度
    ctx.beginPath();
    ctx.arc(210, 210, 180, 0 / 180 * Math.PI, 360 / 180 * Math.PI, false)
    ctx.strokeStyle = 'white';
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.stroke()

    // 五分钟刻度,每30度一分钟,即五个刻度
    ctx.beginPath();
    for (var i = 0; i < 12; i++) {
        ctx.moveTo(210, 210);
        ctx.arc(210, 210, 200, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);
    }
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 3;  //相比于一分钟的加粗一点
    ctx.stroke()

    // 五分钟刻度中间多余的用圆盖住,只留最外一圈的刻度
    ctx.beginPath();
    ctx.arc(210, 210, 170, 0 / 180 * Math.PI, 360 / 180 * Math.PI, false)
    ctx.strokeStyle = 'white';  //边框
    ctx.fillStyle = 'white';    //填充
    ctx.fill();
    ctx.stroke()


    // 画指针圆心
    ctx.beginPath();
    ctx.arc(210, 210, 2, 0 / 180 * Math.PI, 360 / 180 * Math.PI, false)
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fill();
    ctx.stroke()

    // 绘制logo文本
    ctx.beginPath()
    ctx.font = "20px 楷体"
    ctx.textAlign = "center"
    ctx.fillStyle = 'black';
    ctx.fillText("Canvas", 210, 110, 200)
    ctx.closePath()
    ctx.stroke()


    // 画一圈数字   
    var clockRadius = 210;             //定义一个变量,是数字圆半径
    ctx.font = '16px Arial';           //字体大小和字体
    ctx.fillStyle = '#000';            //字体填充
    ctx.textAlign = 'center';          //让数字左右居中对齐
    ctx.textBaseline = 'middle';       //让数字上下居中对齐
    for (var n = 1; n <= 12; n++) {     //循环12次,做12个数字,利用正弦余弦,计算每个数字的坐标
        var theta = (n - 3) * (Math.PI * 2) / 12;       //角度,从-60°开始,
        var x = clockRadius * Math.cos(theta) * 0.75 + clockRadius;    //x坐标,  半径*正弦*0.7+圆心位置    0.75是为了让半径相比于表盘小一点
        var y = clockRadius * Math.sin(theta) * 0.75 + clockRadius;    //y坐标,  半径*正弦*0.7+圆心位置
        ctx.fillText(n, x, y);
        // console.log(n, x, y, theta)
    }
    //tips: Math.cos(a)正弦,对边比斜边    Math.sin(a)余弦,临边比斜边    里面的a表示度数,返回的是正弦或者余弦的值

    // 画时分秒针, 用圆画,让起点和终点度数一样,就重合在一起为一根线
    let cx = 210, cy = 210, r = 210
        //获取当前时间
        let h = new Date().getHours()   //时
        let m = new Date().getMinutes() //分
        let s = new Date().getSeconds() //秒
        h = (h * 30 - 90) / 180 * Math.PI   //时针的度数
        m = (m * 6 - 90) / 180 * Math.PI    //分针的度数
        s = (s * 6 - 90) / 180 * Math.PI    //秒针的度数

        //秒针
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.arc(cx, cy, r - 30, s, s)
        ctx.stroke()
        // 分针
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.arc(cx, cy, r - 60, m, m)
        ctx.stroke()
        // 时针
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.arc(cx, cy, r - 90, h, h)
        ctx.lineWidth = "2"
        ctx.stroke()

    }, 1000)
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用HTML5 Canvas元素来创建动态钟表。首先,在HTML文件中创建一个Canvas元素,并在JavaScript中使用Canvas API来绘制钟表。具体来说,可以使用Canvas中的绘图命令(如arc()和lineTo())来绘制钟表表盘和指针。然后,可以使用JavaScript的setInterval()函数来更新钟表的显示,以反映当前时间。 示例代码如下: ```html <canvas id="clock"></canvas> <script> var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx. ### 回答2: 使用canvas绘制一个动态钟表可以通过以下步骤来完成: 1. 创建一个HTML文件,并在文件中添加一个canvas元素。 2. 在JavaScript文件中获取canvas元素,并设置其宽度和高度。 3. 创建一个函数来获取当前的日期和时间,并将其分解为小时、分钟和秒钟。 4. 创建一个函数来绘制钟表的外观。可以使用canvas的API函数来绘制一个圆形表盘和时刻刻度。 5. 创建一个函数来绘制时针、分针和秒针。使用canvas的API函数来绘制不同长度和角度的线条表示时针、分针和秒针的位置。 6. 在一个循环中,每秒钟调用一次时钟更新函数,并在canvas上清除前一秒钟的绘制结果,然后重新绘制新的时钟。 以上是一个基本的思路,根据个人想法和需求,可以在钟表上添加更多的细节和装饰,例如数字时钟、指针的颜色和形状等。此外,还可以使用HTML和CSS来添加一些交互效果,例如在点击钟表时弹出当前时间的提示框。总的来说,使用canvas绘制动态钟表可以灵活展示时间,并且可根据需求进行个性化的设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值