html5小栗子---canvas时钟

最新推荐文章于 2024-01-14 20:44:38 发布

Couragefff

最新推荐文章于 2024-01-14 20:44:38 发布

阅读量450

点赞数

分类专栏： web前端学习文章标签： html5 canvas 时钟

本文链接：https://blog.csdn.net/StubbornAccepted/article/details/76461674

版权

web前端学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.首先在该项目下的img目录中准备一张背景图片 4.png
2.然后编写Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background:#fff;
        }
        #clock{
            background: #fff;
        }
        #pic{
        }
    </style>
</head>
<body>
   <canvas id="clock" width="400" height="400">
       <img src="img/4.png" alt="" id="pic">
   </canvas>
</body>
<script>
    var cvs=document.getElementById('clock');
    var ctx=cvs.getContext('2d');
    var oImg=document.getElementById('pic');
    function  clock() {
        ctx.clearRect(0,0,400,400);
        var img=document.getElementById('pic');
        ctx.drawImage(img,100,100,200,200);//引入图片做背景
        //画圆
        ctx.beginPath();
        ctx.strokeStyle='#60D9F8';
        ctx.arc(200,200,150,0,360*Math.PI/180,false);
        ctx.lineWidth=4;
        ctx.stroke();
        ctx.clip();
        ctx.drawImage(oImg,50,50,300,300);
        ctx.closePath();
        //画分刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.beginPath();
            ctx.translate(200,200);//重新映射画布(200,200)的位置
            ctx.rotate(i*6*Math.PI/180);//旋转当前绘图
            ctx.strokeStyle='#FF99CC';
            ctx.lineWidth=3;
            ctx.moveTo(0,-140);//在半径的线上,把路径移动到画布中的指定点，不创建线条。
            ctx.lineTo(0,-150);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        //画时刻度
        for(var i=0;i<12;i++){
            ctx.save();
            ctx.beginPath();
            ctx.translate(200,200);//重新映射画布(200,200)的位置
            ctx.rotate(i*30*Math.PI/180);//旋转当前绘图
            ctx.strokeStyle='#6699CC';
            ctx.lineWidth=5;
            ctx.moveTo(0,-135);//在半径的线上,把路径移动到画布中的指定点，不创建线条。
            ctx.lineTo(0,-150);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
       //获取时间
        var now=new Date();
        var second=now.getSeconds();
        var minute=now.getMinutes()+second/60;
        var hour=now.getHours()+minute/60;
       //写时间
        var h2=now.getHours();
        var m2=now.getMinutes();
        var str1=h2>9?h2:('0'+h2);
        var str2=m2>9?m2:('0'+m2);
        ctx.beginPath();
        ctx.fillStyle='#000';
        ctx.font='20px 微软雅黑';
        ctx.fillText(str1+':'+str2,175,320);
        ctx.closePath();
        //画时针
        ctx.beginPath();
        ctx.strokeStyle='#CCFFFF';
        ctx.moveTo(200,200);
        ctx.arc(200,200,80,(hour*30-90)*Math.PI/180,(hour*30-90)*Math.PI/180,false);
        ctx.stroke();
        //画分针
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.arc(200,200,100,(minute*6-90)*Math.PI/180,(minute*6-90)*Math.PI/180,false);
        ctx.stroke();
        //画秒针
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.arc(200,200,120,(second*6-90)*Math.PI/180,(second*6-90)*Math.PI/180,false);
        ctx.stroke();
    }
    clock();
    setInterval(clock,1000);
</script>
</html>

3.效果如下:
这里写图片描述

Couragefff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5小栗子---canvas时钟

1.首先在该项目下的img目录中准备一张背景图片 4.png 2.然后编写Html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background:#fff; }
复制链接

扫一扫

专栏目录