这篇文章主要介绍了 JavaScript html5 绘制时钟效果的相关资料,使用 HTML5 的 canvas 标签和 Javascript 脚本,模拟显示了一个时钟,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0218/266882.html