绘制风景时钟

骑猪看日落 2022-06-15 02:52 215阅读 0赞

![效果图][SouthEast]

<!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>

[SouthEast]: /images/20220615/f4e936996c56468783c71cd3541b086a.png