html画布实现一个时钟应用

来源：互联网发布：淘宝定位跳转代码编辑：程序博客网时间：2024/04/28 06:03

</pre><pre name="code" class="javascript">//核心js逻辑

<script type="text/javascript">var canvas=document.getElementById("canvas");var cobj=canvas.getContext("2d");var originx=250;var originy=250;    var radius=200;    // 添加阴影    setInterval(watch, 1000)        function watch(){    cobj.clearRect(0, 0, 500, 500);    cobj.shadowColor="#888";    cobj.shadowOffsetX=3;    cobj.shadowOffsetY=3;    cobj.shadowBlur=5;    // 添加渐变色    var objColor=cobj.createRadialGradient(originx, originy, 1, originx, originy, 200);    objColor.addColorStop(0, "#efefef");    objColor.addColorStop(1, "#cecece");    cobj.fillStyle=objColor;cobj.beginPath();cobj.arc(originx, originy, radius,0,2*Math.PI);cobj.stroke();cobj.fill();        var date=new Date();    var ha=date.getHours()*30+date.getMinutes()*6/12-90;    var ma=date.getMinutes()*6-90;    var sa=date.getSeconds()*6-90;    drawPointer(80,ha);    drawPointer(100,ma);    drawPointer(120,sa);drawMark();drawBMark();        }    // 小刻度function drawMark(){for (var i = 0; i < 60; i++) {cobj.beginPath();cobj.moveTo(originx+radius*Math.cos(i*6*Math.PI/180), originy+radius*Math.sin(i*6*Math.PI/180));cobj.lineTo(originx+(radius-10)*Math.cos(i*6*Math.PI/180), originy+(radius-10)*Math.sin(i*6*Math.PI/180));cobj.stroke();};}// 大刻度function drawBMark(){for (var i = 0; i < 12; i++) {cobj.beginPath();cobj.lineWidth=3;cobj.moveTo(originx+radius*Math.cos(i*30*Math.PI/180), originy+radius*Math.sin(i*30*Math.PI/180));cobj.lineTo(originx+(radius-16)*Math.cos(i*30*Math.PI/180), originy+(radius-16)*Math.sin(i*30*Math.PI/180));cobj.stroke();};}//画针function drawPointer(radius,angle){cobj.beginPath();cobj.moveTo(originx, originy);cobj.lineTo(originx+radius*Math.cos(angle*Math.PI/180), originy+radius*Math.sin(angle*Math.PI/180));cobj.stroke();}</script>

0 0