JavaScript html5 canvas绘制时钟效果
更新时间：2021年10月12日 11:05:46 作者：丿伊枫
这篇文章主要介绍了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程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了从柯里化分析JavaScript重要的高阶函数实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要给大家介绍了关于JS如何将指定的某个字符全部转换为其他字符的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要给大家介绍了如何通过一文看懂简单实现节流函数和防抖函数的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
javaScript 数值型和字符串型之间的转换2009-07-07
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
最近发现项目用的表单验证不好使，干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(fadeIn)渐隐(fadeOut)过渡(因为浏览器的效率实在太高了，一下就蹦了出来~~)；2010-06-06
今天小编就为大家分享一篇zepto.js 实时监听输入框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-12-12
实现GridView，表头固定，表体有滚动条且可滚动，下面有个不错的示例，希望对大家有所帮助2014-02-02
这篇文章主要介绍了javascript闭包，闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现，感兴趣的小伙伴们可以参考一下2016-01-01
在javascript中对触发事件的元素进行判断，然后执行不同的操作，下面是具体的实现，需要的朋友可以学习下2014-06-06
最新评论