10-17 08:49 阅读 69

JavaScript html5 canvas绘制时钟效果

这篇文章主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下

本文实例讲述了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">

 <title>canvas绘图</title>

</head>

<body onload="init()">

<canvas 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/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 - 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", 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)*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*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, 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.lineWidth = 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程序设计有所帮助。