首页 / JAVASCRIPT / js Canvas实现圆形时钟教程

js Canvas实现圆形时钟教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js Canvas实现圆形时钟教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10576字，纯文字阅读大概需要16分钟。

内容图文

阅读本文需要一点关于canvas基本用法的基础，本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程

第一步：新建一个最简单的html文件，并且在<body>标签中定义元素canvas。

canvas.html

<html>
 <head>
  <title>Canvas clock tutorial</title>
 </head>
 <body>
  <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

在这一步完成后，用浏览器打开canvas.html，你会发现什么都看不到，这是因为我们没有在canvas上绘制任何东西，同时也没有为其定义边界。

在canvas .html中为<canvas>添加css样式属性：

<html>
 <head>
  <title>Canvas clock tutorial</title>
  <style type="text/css">
   canvas { border: 1px solid black; }
  </style>
 </head>
 <body>
  <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

这样，我们就能看到<canvas>的轮廓。

当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

注意: 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。

第二步：新建实现绘制圆形时钟逻辑的draw.js文件，进行初始化工作。

毫无疑问，要实现时钟，就需要获取系统时间。

在js语法中，可以利用Date()来实时获取时间。
var currentTime = new Date();

随后，要掌握的是canvas绘制圆形的函数：
arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法表示画一个以（x,y）为圆心的、以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认顺时针（true））来生成。
其中stratAngle和endAngle的单位并不是我们所熟悉的角度单位，而是弧度单位。一个完整的圆跨弧度2π。

在canvas的坐标系中，是以x轴正方向所在的方向为0弧度。时钟指针按顺时针方向转，以2π为一个周期，因此如下图所示，时钟指针，是从(-1/2)*π位置开始走的。

js Canvas实现圆形时钟教程 - 文章图片

当前时间的弧度计算方式如下：

 //将一个时钟周期12等分，对12求余是因为Date().getHours将返回24小时制的小时。
hour = (currentTime.getHours() % 12 ) * (2 * Math.PI /12); 
//MINUTE 一圈60等分
minute = (currentTIme.getMinutes) * (2* Math.PI / 60); 
//SECOND 一圈60等分
second = (currentTime.getSeconds) * (2 * Math.PI / 60);

由于在canvas中时钟圆从(-1/2)*π开始走，因此我们还需要给它们加上(-1/2)*π的起始偏移量。

初步得到draw.js:

function draw() {
 //canvas绘画的前提工作
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
  ctx.moveTo(200,100);
  ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
  ctx.moveTo(200,50);
  ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
  ctx.stroke();
 }
}

同时在canvas.html中加入draw.js的引用。

<html>
 <head>
  <title>Canvas clock tutorial</title>
  <style type="text/css">
   canvas { border: 1px solid black; }
  </style>
  <script src="draw.js" type="text/javascript"></script>
 </head>
 <body onload="draw();">
  <canvas id="clock" width="400" height="400"></canvas>
 </body>
</html>

在完成了第二步之后，我们可以看到一个当前时间的圆形时钟轮廓。那么接下来，就是让它动起来！

第三步：使用requestAnimationFrame()方法让时钟动起来。

requestAnimationFrame()的执行频率是1秒60帧，用户可以在requestAnimationFrame定义事件，使其在每一帧中重复、迭代完成相应的事件。

在我们这个案例中，每一帧里面requestAnimationFrame要做的事情很简单，为当前时间的三个参数（时针、分针、秒针）添加增量，然后重新绘制时钟。

根据一秒60帧的频率，那么second在1帧里面的增量是：2*π / 60 / 60 = π / 1800；

minute在一帧里面的增量是second增量的60分之一；hour在一帧里面的增量是minute的12分之1。

另外：当hour、minute、second任一一个变量到达3/2*π后，意味着完成了一个周期，就要重新初始化为(-1/2)*π，否则会覆盖绘制成一个圆。

由此得到：requestAnimationFrame()函数中，hour，minute，second的更新过程如下：

   var s = Math.PI / 1800;
   var m = s / 60;
   var h = m / 12;
   second = second + s;
   minute = minute + m;
   hour = hour + h;
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   if(minute >= Math.PI * (3/2)){
    minute = Math.PI * (-1/2);
   }
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }</span>

更新draw.js的完整代码如下：

function draw() {
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  var s = Math.PI / 1800;
  var m = s / 60;
  var h = m / 12;
  var rotate = requestAnimationFrame(step);
  function step(){
   second = second + s;
   minute = minute + m;
   hour = hour + h;
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   if(minute >= Math.PI * (3/2)){
    minute = Math.PI * (-1/2);
   }
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   ctx.clearRect(0, 0, 400 , 400);
   ctx.beginPath();
   ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
   ctx.moveTo(200,100);
   ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
   ctx.moveTo(200,50);
   ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
   ctx.stroke();
   requestAnimationFrame(step);
  }
 }
}

到这步为止，我们已经得到了一个会动的圆形时钟，接下来，我们为其添加上指针。

第四步*：添加时针、分针、秒针。

JS为我们提供了Math.cos() 、Math.sin() 计算指针到达的位置，它们所接收参数的单位也都是弧度。

 function draw() {
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  var s = Math.PI / 1800;
  var m = s / 60;
  var h = m / 12;
  var rotate = requestAnimationFrame(step);
  function step(){
   second = second + s;
   minute = minute + m;
   hour = hour + h;
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   if(minute >= Math.PI * (3/2)){
    minute = Math.PI * (-1/2);
   }
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   //秒针的终点
   xs = 150 * Math.cos(second) + 200;
   ys = 150 * Math.sin(second) + 200;
   //分针的终点
   xm = 100 * Math.cos(minute) + 200;
   ym = 100 * Math.sin(minute) + 200;
   //时针的终点
   xh = 50 * Math.cos(hour) + 200;
   yh = 50 * Math.sin(hour) + 200;

   ctx.clearRect(0, 0, 400 , 400);
   ctx.beginPath();
   //绘制指针
   ctx.moveTo(200,200);
   ctx.lineTo(xs,ys);
   ctx.moveTo(200,200);
   ctx.lineTo(xm,ym);
   ctx.moveTo(200,200);
   ctx.lineTo(xh,yh);
   //绘制圆形轮廓
   ctx.moveTo(200,150);
   ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
   ctx.moveTo(200,100);
   ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
   ctx.moveTo(200,50);
   ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
   ctx.stroke();
   requestAnimationFrame(step);
  }
 }
}

嗯嗯，虽然指针是画出来了，都是我略感后悔，因为感觉太丑了。从审美学角度而言，带指针时钟就应该是个全圆轮廓的时钟。不知道读者有没有同感。我决定在第五步中把第四步回退了。

第五步：个性化、美化、自定义你的时钟。

html5的canvas画布，提供了多种样式属性，如线条颜色、线条粗细等等。

为了提高代码的可重用性，我们将画圆的代码抽象成一个函数。

 function draw() {
 var canvas = document.getElementById('clock');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  var s = Math.PI / 1800;
  var m = s / 60;
  var h = m / 12;
  var rotate = requestAnimationFrame(step);
  function step(){
   second = second + s;
   minute = minute + m;
   hour = hour + h;
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   if(minute >= Math.PI * (3/2)){
    minute = Math.PI * (-1/2);
   }
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }

   ctx.clearRect(0, 0, 400 , 400);
   ctx.beginPath();
   //绘制圆形轮廓
   drawCircle(ctx, 100, hour, '#99ff00');
   drawCircle(ctx, 120, minute, '#99ff66');
   drawCircle(ctx, 140, second, '#66cc66');
   requestAnimationFrame(step);
  }
 }
}

function drawCircle(ctx, radius ,endAngle, color){
 ctx.beginPath();
 ctx.moveTo(200,200-radius);
 ctx.strokeStyle = color;
 ctx.lineWidth = 20;
 ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
 ctx.stroke();
}

第六步（后续添加）：为时钟添加数字指数。

具体做法为多增加一个画布canvas元素。既然我们已经能从Date()中获取时间，那么显示数值的来源不成问题。读者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法来实现每秒更新一次指数。

修改后的canvas.html

<html>
 <head>
  <title>Canvas clock tutorial</title>
  <style type="text/css">
   canvas { border: 1px solid black; }
   #display {position: absolute; top:8; left:8;}
  </style>
  <script src="draw.js" type="text/javascript"></script>
 </head>
 <body onload="draw();">
  <canvas id="clock" width="400" height="400"></canvas>
  <canvas id="display" width="400" height="400"></canvas>
 </body>
</html>

修改后的draw.js

function draw() {
 var canvas = document.getElementById('clock');
 var displayCanvas = document.getElementById('display');
 var currentTime = new Date();
 var hour = (currentTime.getHours()%12) * Math.PI/6;
 var minute = currentTime.getMinutes() * Math.PI/30;
 var second = currentTime.getSeconds() * Math.PI/30;
 hour = hour - Math.PI * (1/2);
 minute = minute - Math.PI * (1/2);
 second = second - Math.PI * (1/2);
 if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  var ctxD = displayCanvas.getContext('2d');
  showDisplay(ctxD, currentTime);
  var s = Math.PI / 1800;
  var m = s / 60;
  var h = m / 12;
  var rotate = requestAnimationFrame(step);
  function step(){
   second = second + s;
   minute = minute + m;
   hour = hour + h;
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }
   if(minute >= Math.PI * (3/2)){
    minute = Math.PI * (-1/2);
   }
   if(second >= Math.PI * (3/2)){
    second = Math.PI * (-1/2);
   }

   ctx.clearRect(0, 0, 400 , 400);
   ctx.beginPath();
   //绘制圆形轮廓
   drawCircle(ctx, 100, hour, '#99ff00');
   drawCircle(ctx, 120, minute, '#99ff66');
   drawCircle(ctx, 140, second, '#66cc66');
   requestAnimationFrame(step);
  }
 }
}

function drawCircle(ctx, radius ,endAngle, color){
 ctx.beginPath();
 ctx.moveTo(200,200-radius);
 ctx.strokeStyle = color;
 ctx.lineWidth = 20;
 ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
 ctx.stroke();
}

function showDisplay(ctx, date){
 var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
 //计时文字样式
  ctx.font = "13px Sans-Serif";
 ctx.textAlign = "center";
 ctx.strokeText(h+":"+m+":"+s,200,200);
 var timmer = setInterval(function(){
  s++;
  if(s>=60){
   m++;
   s=0;
  }
  if(m>=60){
   h++;
   m=0;
  }
  if(h>=24){
   h=0;
  }
  ctx.clearRect(0,0,400,400);
  ctx.strokeText(h+":"+m+":"+s,200,200);
 },1000);
}

最终成果图如下：

js Canvas实现圆形时钟教程 - 文章图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的js Canvas实现圆形时钟教程全部内容，希望文章能够帮你解决js Canvas实现圆形时钟教程所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/349515.html

来源：【匿名】

【上一篇】原生js实现ajax方法(超简单)【下一篇】javascript 怎么调用php方法

更多 ►

【js Canvas实现圆形时钟教程】教程文章相关的互联网学习教程文章

【JavaScript】操作Canvas画图

1、页面添加 Canvas 标签标签内可以写文字，浏览器不支持Canvas的情况下显示,2、js获取 Canvas 标签3、利用js函数画图，【线】【图】【文字】源：http://www.liaoxuefeng.com原文：http://www.cnblogs.com/oiliu/p/4793644.html

[Javascript] Gradient Fills on the HTML5 Canvas【代码】【图】

window.onload = function() {var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");var gradient =context.createLinearGradient(100,100,100,200);gradient.addColorStop(1,"blue"); // show blue at the bottomgradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient;context.fillRect(100,100,100,100); }; window.onload = function() {var canvas = ...

javascript canvas 曲线片面（上）【代码】【图】

写前面：这东西是有用武之地的也许就明天你就会用到其中的部分思想(被某人吐槽研究的东西没用我就醉了~)------------------------------------什么是曲线片面看下面！上面这个就是相对简单的双线性片面可通过4个点来控制左上角 A点顺时针依次就是 ABCD 这个东西其实就是 BA方向和 DA 方向的线性插值组合下图先沿着DA CB 方向插值再继续对 BA 方向插值生成三角坐标的代码： 1//初始点 2var dot_ar = [3new _$.Vec(0, 0)...

JavaScript强化教程——canvas【代码】

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— canvas使用 strokeText(): 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）： JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);Canvas - 渐变渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同...

如何用javascript中的canvas让图片自己旋转【图】

最近在写一个游戏，想让一个人物随着鼠标在原地旋转在网上找了找，大都是用css写的，但是我为了长远的利益着想选择使用javascript代码中的canvas来解决绘图问题其中重要的两个方法：context.translate(x,y) 用于重新设定画布的原点参数是设定的原点坐标 context.rotate(角度*Math.PI/180)让图片旋转，参数是指旋转的弧度如果要填入角度就像上面一样乘以 Math.PI/180 核心思路：转载自：http://jingyan.baidu.com/article/ab0b56...

Canvas + JS 实现简易的时钟【代码】【图】

之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下：实现效果： html代码： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Clock</title><style type="text/css">*{margin: 0;padding: 0;}.canvas{margin-left: 20px;margin-top: 20px;border: solid...

[js高手之路] html5 canvas动画教程 - 匀速运动【代码】

匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。 1 <head>2 <meta charset=‘utf-8‘ />3 <style>4 #canvas {5 border: 1px dashed #aaa;6 }7 </style>8 <script>9 window.onload = function () { 10var oCanvas = docume...

JS实现简单的Canvas画图实例

定义变量:[javascript] 代码如下:var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"); var startX;var startY;var endX;var endY;var radius;var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");var select = document.getElement...

javascript – 选择合适的技术(SVG vs Canvas)【代码】

我正在编写一个用于形状操作的应用程序,这样在创建简单形状之后,用户可以通过将形状相互剪切来创建更复杂的形状(即将两个圆组合在一起形成使用单个路径而不是组存储的图8,或者执行两个圆的交叉以创建“咬”标记),并且我正在尝试决定要使用的图形库. SVG似乎可以处理开箱即用的80％功能(形状存储,移动,旋转,缩放).问题是,如果不在我自己的模块中重新创建SVG功能,其他20％(使用剪辑创建一组新的复杂多边形)似乎无法实现(我必须存储一...

js+HTML5使用canvas绘制图片方法详解【图】

这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了HTML5 canvas绘制图片的具体代码，供大家参考，具体内容如下demo.jswindow.onload=function() {createcanvas();drawImage(); }function createcanvas() {var CANVAS=document.getElementById(mycanvas);context=CANVAS.getContext(2d);}function drawImage() {var img=new Image();img.onload=f...

javascript – 为什么使用HTML Canvas在图像上使用CORS？【代码】

最近,我花了一些时间研究解决Web开发中一个相当常见的问题的解决方案 – 我在透明背景上处理中间对齐的徽标,但是必须在它们下面放置文本,然后它看起来好像是文本和图像之间的空白在页面之间移动.经过一些研究,我发现我可以使用画布重新对齐左下图像,并且解决方案工作得很漂亮……至少在我将解决方案集成到我们的代码库中之前发现它失败了： “无法从画布获取图像数据,因为画布已被跨源数据污染.” (说什么！？) 调查一下,违规代码位...

JS和canvas实现俄罗斯方块【图】

效果图：代码如下： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><p style="font-size: 20px;">键盘箭头A,D控制左右移动，S控制快速下滑。W控制变形,空格控制暂停，enter开始游戏</p><div id="box" style="width: 1000px;height: 800px;border: 1px solid pink;margin: 0 auto;position: relative;"></div></body> <script type="text/javascript"> shape_collection = {//图形顺时针旋转变形...

javascript – Canvas图像无法在Chrome中呈现(适用于FF4和IE9)【代码】

我很难过.对于我的生活,我不知道为什么这不适用于Chrome.你可以在这里看到代码： http://jsfiddle.net/corydorning/NgXSH/ 当我在FF或IE9中提取此代码时,效果很好.您会注意到,小提琴将在Chrome中与渲染元素一起使用,但它不能在小提琴之外工作. 任何帮助是极大的赞赏.这是我第一次尝试使用canvas.解决方法:问题似乎是你没有等待原始图像元素被加载.如果你稍微改变一下,它可以正常工作：$(function() {var canvas = document.createE...

Js+Canvas做出图片压缩

这次给大家带来Js+Canvas做出图片压缩，Js+Canvas做出图片压缩的注意事项有哪些，下面就是实战案例，一起来看一下。/* * 图片压缩* img 原始图片* width 压缩后的宽度* height 压缩后的高度* ratio 压缩比率 */function compress(img, width, height, ratio) { var canvas, ctx, img64;canvas = document.createElement(canvas); canvas.width = width;canvas.height = height; ctx = canvas.getContext(...

JS+Canvas实现的俄罗斯方块游戏完整实例【图】

本文实例讲述了JS+Canvas实现的俄罗斯方块游戏。分享给大家供大家参考，具体如下：试玩（没有考虑兼容低版本浏览器）：********************************************************************** 9月3日更新：修复了隐藏的比较深的BUG 加上暂停、再来一次功能速度随分数增高而递减添加log日志 ********************************************************************* 通过写这个游戏收获几点： 1、canvas的isPointInPath方法不...

首页 / JAVASCRIPT / js Canvas实现圆形时钟教程

js Canvas实现圆形时钟教程

内容导读

内容图文

内容总结

内容备注

内容手机端

【js Canvas实现圆形时钟教程】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程