html5小栗子---canvas时钟

来源：互联网发布：ajax请求json数据编辑：程序博客网时间：2024/05/02 01:23
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.效果如下:
这里写图片描述
阅读全文
0 0