《JavaScript html5 canvas绘制时钟效果_》由会员分享，可在线阅读，更多相关《JavaScript html5 canvas绘制时钟效果_（6页珍藏版）》请在装配图网上搜索。
1、JavaScript html5 canvas绘制时钟效果_ 本文实例讲解并描述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考，具体如下： HTML部分： !DOCTYPE html html lang=en head meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0 titlecanvas绘图/title /head body onload=init() canvas
2、id=canvas width=200px height=200px/canvas /body /html JavaScript部分： function init() var canvas = document.getElementById(canvas), context = canvas.getContext(2d); setInterval(function()draw(canvas, context),1000); function draw(canvas, context) var x = canvas.width, y = canvas.height, r = Math.min(x
3、/2, y/2); context.clearRect(0, 0, x, y); /清除绘画历史 /绘画钟框 context.fillStyle = #f1f1f1; drawCircle(context, x, y, r); /绘画文字 var tx = x/2,ty = y/2,tr = 0.8*r; context.font = bold 12px 微软雅黑; context.fillStyle = #000; drawText(context, 1, tx + 0.5*tr,ty - 0.866*tr); drawText(context, 2, tx + 0.866*tr, ty -
4、 0.5*tr); drawText(context, 3, tx + tr, ty); drawText(context, 4, tx + 0.866*tr, ty + 0.5*tr); drawText(context, 5, tx + 0.5*tr, ty + 0.866*tr); drawText(context, 6, tx, ty + tr); drawText(context, 7, tx - 0.5*tr, ty + 0.866*tr); drawText(context, 8, tx - 0.866*tr, ty + 0.5*tr); drawText(context, 9,
5、 tx - tr, ty); drawText(context, 10, tx - 0.866*tr, ty - 0.5*tr); drawText(context, 11, tx - 0.5*tr, ty - 0.866*tr); drawText(context, 12, tx, ty - tr); /猎取当前时间 var date = new Date(), h = date.getHours(), m = date.getMinutes(), s = date.getSeconds(), angleH = (360/12)*Math.PI/180, angleM = (360/60)*
6、Math.PI/180 context.strokeSyle = #000; /绘制时刻度 drawScale(context, x, y, r, angleH, -0.88*r, -0.96*r, 3); /绘制分刻度 drawScale(context, x, y, r, angleM, -0.93*r, -0.96*r, 1); /绘画时分秒针 drawCircle(context, x, y, 3); drawNeedle(context, x, y, r, h*angleH + m*angleM/12, -0.5*r); drawNeedle(context, x, y, r, m*
7、angleM + s*angleM/60, -0.6*r); drawNeedle(context, x, y, r, s*angleM, -0.75*r); /绘画圆 function drawCircle(context, x, y, r) context.save(); context.beginPath(); context.arc(x/2, y/2, r, 0, Math.PI*2, 0); context.fill(); context.closePath(); context.restore(); /绘画文字方法 function drawText(context, text,
8、x, y) context.save(); x -= (context.measureText(text).width/2); y += 4; context.translate(x, y); context.fillText(text, 0, 0); context.restore(); /绘制刻度方法 function drawScale(context, x, y, r, rotate, start, end, lineWidth) context.save(); context.beginPath(); context.translate(x/2,y/2); context.lineW
9、idth = lineWidth; for (var i = 0; i 60; i+) context.rotate(rotate); context.moveTo(0, start); context.lineTo(0, end); context.closePath(); context.stroke(); context.restore(); /绘画时分秒针方法 function drawNeedle(context, x, y, r, rotate, line) context.save(); context.translate(x/2,y/2); context.beginPath(); context.rotate(rotate); context.moveTo(0, 0.1*r); context.lineTo(0, line); context.closePath(); context.stroke(); context.restore(); 盼望本文所述对大家JavaScript程序设计有所关心。 .
JavaScript html5 canvas绘制时钟效果_
