绘制风景时钟

最新推荐文章于 2021-11-04 11:33:02 发布

VLilyV

最新推荐文章于 2021-11-04 11:33:02 发布

阅读量898

点赞数

分类专栏： h5 css3 javascript

本文链接：https://blog.csdn.net/VLilyV/article/details/72621708

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css3

4 篇文章 1 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制表盘</title>
</head>
<body>
    <div>
        <canvas id="canvas" width="500" height="500" >     
    </div>
    <script>
        var cxt=document.getElementById('canvas').getContext('2d');
        var oP=document.getElementsByTagName('p')[0];
        var img=new Image();
        img.src="clock.jpg";
        img.onload=function(){
            timePoint();
            setInterval(timePoint,1000);

        }
        //中国时间格式函数
        function timeTo(time){
            time=time<10 ? "0" + time :  "" + time;
            return time;
        }
        // 小时和秒刻度值函数
        function dial(lineWidth,value,deg,y0){
                cxt.save();
                cxt.translate(250,250);//原点移动到圆心
                cxt.strokeStyle="#000";
                cxt.lineWidth=lineWidth;
                for(var i=0;i<value;i++){
                    cxt.rotate(deg*Math.PI/180);//注意它和Math.PI/60完全不一样，因为PI是3.14
                    cxt.beginPath();
                    cxt.moveTo(0,y0);
                    cxt.lineTo(0,-200);
                    cxt.closePath(); 
                    cxt.stroke(); 
                }
                cxt.restore();
            }
        // 小时和分针转动函数
        function timeMove(lineWidth,strokeStyle,timeType,y1){
            cxt.save();
            cxt.lineWidth=lineWidth;
            cxt.strokeStyle=strokeStyle;
            cxt.translate(250,250);
            cxt.rotate(timeType*Math.PI/180);//一小时旋转30度
            cxt.beginPath();
            cxt.moveTo(0,0);
            cxt.lineTo(0,y1);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
        }
        //指针转动+时间走动函数
        function timePoint(){
            var oDate=new Date;
            var oH=oDate.getHours();
            var oM=oDate.getMinutes();
            var oS=oDate.getSeconds();
            oH2=oH>12?oH-12:oH;
            // 黑色背景
            cxt.fillStyle='block';
            cxt.beginPath();
            // cxt.drawImage(img,0,0,500,500); 
            cxt.fillRect(0,0,500,500);
            cxt.closePath();
            // 表盘
            cxt.beginPath();
            cxt.strokeStyle="#00FFFF";
            cxt.lineWidth=8;
            cxt.arc(250,250,200,0,Math.PI*2,true);
            cxt.stroke();
            cxt.closePath();
            //背景图片 注意放置代码的位置应该是在圆盘后，刻度前
            cxt.clip();
            cxt.drawImage(img,0,0,500,500); 
            //调用小时和秒刻度值函数
            dial(8,12,30,-186);
            dial(4,60,6,-195);
            // 时间文字
            cxt.font="16px 微软雅黑";
            cxt.fillStyle="#fff";
            cxt.fillText(timeTo(oH)+":"+timeTo(oM)+":"+timeTo(oS),242,365);
            // Made In China文字
            cxt.font="18px 微软雅黑";
            cxt.strokeStyle="red";
            cxt.lineWidth=1;
            cxt.fillText("Made In China",215,390);
            cxt.strokeText("Made In China",215,390);
            // 时针
            timeMove(6,"#00FFFF",oH2*30,-120);
            // 分针
            timeMove(4,"yellow",oM*6,-140);

            // 秒针
            cxt.save();
            cxt.lineWidth="3";
            cxt.strokeStyle="red";
            cxt.fillStyle="yellow";
            cxt.translate(250,250);
            cxt.rotate(oS*6*Math.PI/180);//一秒旋转6度

            cxt.beginPath();
            cxt.arc(0,0,6,0,Math.PI*2,true);
            cxt.moveTo(0,-7);
            cxt.lineTo(0,-80);
            cxt.fill();
            cxt.stroke();
            cxt.closePath();

            cxt.beginPath();
            cxt.arc(0,-103,5,0,Math.PI*2,true);
            cxt.moveTo(0,-8);
            cxt.lineTo(0,-155);
            cxt.stroke();
            cxt.fill();
            cxt.closePath();
            cxt.restore(); 
        }
    </script>
</body>
</html>