足球游戏_中国足彩网¥体育资讯$

JavaScript html5 canvas绘制时钟效果
来源:易贤网 阅读:683 次 日期:2016-08-04 15:07:54
温馨提示:易贤网小编为您整理了“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">

 <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程序设计有所帮助。

中国足彩网信息请查看网络编程
易贤网手机网站地址:JavaScript html5 canvas绘制时钟效果
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标