用html5的canvas画一个可以动的时钟

最新推荐文章于 2021-05-31 02:39:23 发布

tu1234321

最新推荐文章于 2021-05-31 02:39:23 发布

阅读量441

点赞数

分类专栏： html前端

本文链接：https://blog.csdn.net/u014213453/article/details/42110185

版权

html前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

</pre><pre>

<!DOCTYPE html>
<html>
<head>
    <title>时钟</title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="myCanvas" height="500" width="500" style="margin-left: 350px">您的浏览器不支持html5的canvas元素</canvas>
    <audio preload controls="controls">
        <source src="mp3/2.ogg">
        <source src="mp3/1.mp3">
    </audio>
</body>
<script>
    function show(){
        var time=new Date();
        var miao=time.getSeconds();
        var fen=time.getMinutes()+miao/60;
        var shi=time.getHours()+fen/60;
        var context=document.getElementById('myCanvas').getContext('2d');
        context.clearRect(0,0,500,500);
        context.beginPath();
        context.arc(250,250,250,0,2*Math.PI);
        context.closePath();
        context.stroke();
        for(var i=0;i<12;i++){
            context.save();
            context.translate(250,250);
            context.beginPath();
            context.rotate(i*30*Math.PI/180);
            context.lineWidth=10;
            context.moveTo(0,-250);
            context.lineTo(0,-230);
            context.stroke();
            context.restore();
        }
        for(var j=0;j<60;j++){
            context.save();
            context.translate(250,250);
            context.beginPath();
            context.rotate(j*6*Math.PI/180);
            context.lineWidth=5;
            context.moveTo(0,-250);
            context.lineTo(0,-240);
            context.stroke();
            context.restore();
        }
       //时针
        context.save();
        context.translate(250,250);
        context.beginPath();
        context.lineWidth=10;
        context.strokeStyle='black';
        context.rotate(shi*30*Math.PI/180);
        context.moveTo(0,20);
        context.lineTo(0,-160);
        context.closePath();
        context.stroke();
        context.restore();

        context.save();
        context.translate(250,250);
        context.beginPath();
        context.lineWidth=8;
        context.strokeStyle='black';
        context.lineCap='round';
        context.rotate(fen*6*Math.PI/180);
        context.moveTo(0,20);
        context.lineTo(0,-180);
        context.closePath();
        context.stroke();
        context.restore();

        context.save();
        context.translate(250,250);
        context.beginPath();
        context.lineWidth=6;
        context.strokeStyle='red';
        context.lineCap='round';
        context.rotate(miao*6*Math.PI/180);
        context.moveTo(0,20);
        context.lineTo(0,-200);
        context.closePath();
        context.stroke();
        context.restore();
    }
   window.setInterval(show,1000) ;
</script>
</html>

tu1234321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用html5的canvas画一个可以动的时钟

图形--时钟你的浏览器不支持Html5-canvas！ function show(){ var mycontext=document.getElementById("mycanvas").getContext("2d"); mycontext.clearRect(0,0,500,500);
复制链接

扫一扫