canvas自适应圆形时钟绘制(2)_H5之家 - 中国HTML5教程资源分享第一站

　　最终完整代码如下所示

Document); if(drawing.getContext){ ); ; ; ; R; function drawStatics(){ cxt.save(); cxt.translate(R,R); cxt.beginPath(); cxt.lineWidth R; cxt.arc( cxt.stroke(); cxt.beginPath(); cxt.font ; cxt.textAlign ; cxt.textBaseline ; ){ r1; r1; cxt.fillText(i,x,y); } cxt.beginPath(); ){ r2; r2; cxt.beginPath(); ){ cxt.arc(x,y,cw{ cxt.arc(x,y,cw/8,0,2*Math.PI,false); } cxt.fill(); } cxt.restore(); } function drawDot(){ cxt.save(); cxt.translate(R,R); cxt.beginPath(); cxt.arc( cxt.fill(); cxt.restore(); } function drawSecond(second){ cxt.save(); cxt.translate(R,R); cxt.beginPath(); cxt.rotate(radius); cxt.lineWidth = 2; cxt.moveTo(); cxt.lineTo(R); cxt.strokeStyle ; cxt.stroke(); cxt.restore(); } function drawMinute(minute,second){ cxt.save(); cxt.translate(R,R); cxt.beginPath(); second; cxt.rotate(radius + sRaiuds); cxt.lineWidth = 4; cxt.lineCap ; cxt.moveTo(0,cw); cxt.lineTo( cxt.stroke(); cxt.restore(); } function drawHour(hour,minute){ cxt.save(); cxt.translate(R,R); cxt.beginPath(); minute; cxt.rotate(radius + mRaiuds); cxt.lineWidth = 6; cxt.lineCap ; cxt.moveTo()); cxt.stroke(); cxt.restore(); } function draw(){ cxt.clearRect(,W,H); drawStatics(); Date(); drawHour(now.getHours(),now.getMinutes()); drawMinute(now.getMinutes(),now.getSeconds()); drawSecond(now.getSeconds()); drawDot(); } draw(); setInterval(draw,500); }

爱编程-编程爱好者经验分享平台