canvas动画时钟

GHOST_349178 发布于2019-08-21 14:44 / 2721人阅读

摘要：最近在学，然后根据上的例子做了个动画时钟为什么要造个轮子，因为丑。。首先，找一张时钟的图片，就是下面这张了。那么我们就用循环来画出小时的刻度。这个就是我们的绘制时钟的函数。到这里，动画时钟就了效果图如下演示地址地址

最近在学canvas，然后根据MDN上的例子做了个动画时钟~~（为什么要造个轮子，因为丑。。）~~

这是MDN上的例子，怎么说呢，比较复古吧。

首先，找一张时钟的图片，就是下面这张了。

——来自bigger than bigger的dribbble网站，图片来源（侵删）

然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签

在js文件中创建画布（假设我们使用的都是现代浏览器）。

function clock() {
  var ctx = document.getElementById("canvas").getContext("2d");
}

先来绘制时钟表盘，我们看到这张图是带有光线阴影效果的，画成一样难度太高。于是就用颜色的渐变来让时钟看起来稍微立体一点。在canvas中用createLinearGradient来创建一个新的渐变，并用addColorStop上色，最后把颜色赋给strokeStyle。详见运用样式与颜色 by MDN

//绘制表盘底色
ctx.translate(200, 200); //将坐标原点移到画布中心
ctx.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
var lingrad = ctx.createLinearGradient(150, 0, -150, 0);
lingrad.addColorStop(0, "#242f37");
lingrad.addColorStop(1, "#48585c");
ctx.fillStyle = lingrad;
ctx.beginPath();
ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
ctx.fill();

比较关键的一点是画布的坐标轴x轴正方向是时钟3点钟方向，为了方便起见，我们把它逆时针旋转90度让它指向十二点钟方向。

绘制刻度要用到旋转rotate（变形 Transformations by MDN），小时刻度有12个，相邻两个刻度与圆心连线的角度就是Math.PI/6，这里用的是弧度表示，也就是30度。那么我们就用for循环来画出小时的刻度。

for (var i = 0; i < 12; i++) {
  ctx.beginPath();
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();
}

同理，分钟的刻度也一样。

ctx.beginPath();
for (i = 0; i < 60; i++) {
  if (i % 5 !== 0) { //去掉与小时刻度重叠的部分
    ctx.beginPath();
    ctx.strokeStyle = "#536b7a";
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  }
  ctx.rotate(Math.PI / 30);
}

表盘大致画好了，刻度也画好了，接下来就是绘制指针并让它指向正确的时间，是不是？不就就是画一条直线么。关键是指针rotate的角度是多少呢？其实也是比较简单的。先获取当前的时间，把小时转换为12小时制的。

var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

那么，时针的位置就是（相对于x轴正方向转过的角度）：

ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

同理，分针和秒针的位置：

ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800)); //分针
ctx.rotate(sec * (Math.PI /30)); //秒针

最后，最关键的让指针转动起来，这里要用到的是requestAnimationFrame方法，用来重绘页面，得到连贯逐帧的动画，实现最佳的动画效果。

window.requestAnimationFrame(callback);

这个callback就是我们的绘制时钟的clock()函数。需要注意的是每次执行完requestAnimationFrame后需要清除画布，不然出现重叠交错的现象，我们把它放在clock函数开始的地方。

ctx.clearRect(0, 0, canvas.width, canvas.height);

到这里，动画时钟就OK了效果图如下：

Codepen演示地址

Github地址

服务器托管专线服务 html5动画时钟 html5时钟动画 Canvas _canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88020.html

canvas动画时钟

摘要：最近在学，然后根据上的例子做了个动画时钟为什么要造个轮子，因为丑。。首先，找一张时钟的图片，就是下面这张了。那么我们就用循环来画出小时的刻度。这个就是我们的绘制时钟的函数。到这里，动画时钟就了效果图如下演示地址地址最近在学canvas，然后根据MDN上的例子做了个动画时钟（为什么要造个轮子，因为丑。。）这是MDN上的例子，怎么说呢，比较复古吧。 showImg(https://se...

didikee 2019-08-05 10:19 评论0 收藏0
circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...

boredream 2019-08-29 11:18 评论0 收藏0
circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...

宠来也 2019-08-01 15:42 评论0 收藏0
circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...

paney129 2019-08-22 10:38 评论0 收藏0
使用Canvas绘制简单的时钟控件

摘要：有了，我们就再也不需要了，直接使用完成绘制。绘制原点开始时钟开始时钟我们将当前时间绘制到始终上面即可需要注意的是，在绘制之前需要将之前绘制的东西清除掉。Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就...

trilever 2019-04-23 11:50 评论0 收藏0