摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的。

本文分享自华为云社区《如何实现一个朴实无华的Canvas时钟效果》,作者: 北极光之夜。。

一.先看效果:

今天写一个canvas的时钟案例。效果可能看起来比较简单,没有那些花里胡哨的,不过,它涉及的canvas知识点是比较多的,初学canvas那是必定要会的。下面手把手带你快速实现~

二.实现步骤(源码在最后):

1. 设置基本的标签与样式:

<div class="clock">
<canvas width="300" height="300" id="canvas"></canvas>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: rgb(3, 47, 98);">rgb(204, 204, 204);
}
.clock {
width: 300px;
height: 300px;
color: rgb(3, 47, 98);">rgb(15, 15, 15);
border-radius: 50px;
}

2. 开始js代码实现,下面为了易于理解,所以一个功能封装一个函数:

  var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

3. 先绘制钟的整体白色底盘:

同时为了后期将旋转点为.clock的中心的,所以将translate偏移一半的距离。

function drawPanel() {
ctx.translate(150, 150);
// 开始绘制
ctx.beginPath();
// 画一个圆
ctx.arc(0, 0, 130, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}

4.绘制时钟的12位数字:

可知,一个圆上它的x坐标为:R * cos(它的角度), y坐标为:R *sin(它的角度)。
同时,因为Math.cos()与Math.sin()里是计算弧度的,所以要转换。公式:弧度 = 角度 * π / 180

function hourNum() {
// 存放12个数字
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
ctx.beginPath();
// 数字的基本样式
ctx.font = "30px fangsong";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "black";
for (var i = 0; i < arr.length; i++) {
ctx.fillText(
arr[i],
108 * Math.cos(((i * 30 - 60) * Math.PI) / 180),
108 * Math.sin(((i * 30 - 60) * Math.PI) / 180)
);
}
}

5. 绘制时钟中心的圆点:

一个灰圆覆盖一个稍大的黑圆。

function centerDot() {
ctx.beginPath();
ctx.arc(0, 0, 8, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "gray";
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fill();
}

6.绘制时针:

假设参数 hours 与 minutes 为传入的当前的时间的小时数与分钟数。

function hourHand(hours, minutes) {
// 应该旋转的角度,默认时钟为指向12点方向。
var radius =
((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;
// 保存当前状态,为了旋转后能回到当初状态。
ctx.save();
ctx.beginPath();
// 针的宽度
ctx.lineWidth = 5;
// 针头为圆角
ctx.lineCap = "round";
ctx.strokeStyle = "black";
// 旋转
ctx.rotate(radius);
// 画一条线表示时钟
ctx.moveTo(0, 0);
ctx.lineTo(0, -50);
ctx.stroke();
// 回到保存的状态
ctx.restore();
}

7. 同理,绘制分针:

 function minuteHand(minutes) {
2 * Math.PI;
var radius = ((2 * Math.PI) / 60) * minutes;
ctx.save();
ctx.beginPath();
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.strokeStyle = "black";
ctx.rotate(radius);
ctx.moveTo(0, 0);
ctx.lineTo(0, -70);
ctx.stroke();
ctx.restore();
}

8. 同理,绘制秒针:

function secondHand(seconds) {
var radius = ((2 * Math.PI) / 60) * seconds;
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = "round";
ctx.strokeStyle = "red";
ctx.rotate(radius);
ctx.moveTo(0, 0);
ctx.lineTo(0, -90);
ctx.stroke();
ctx.restore();
}

9. 封装一个函数获取当前时间:

同时函数内部调用全部绘制的函数。实现绘制一个完整的时钟。

function update() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
// 保存canvas状态,因为绘制底盘时它偏移了
ctx.save();
drawPanel();
hourNum();
secondHand(seconds);
minuteHand(minutes);
hourHand(hours, minutes);
centerDot();
// 恢复canvas状态
ctx.restore();
}
update();

10. 开启定时器,时钟运转:

  setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
}, 1000);

三.总结:

上面就是全部内容了,实现并不难,就是对canvas提供的一些方法进行合理的使用,拿来练手是很不错的。源码在我的gitee仓库直接去下载或者复制获取:https://gitee.com/aurora-in-winter/blog.git

点击关注,第一时间了解华为云新鲜技术~

教你实现一个朴实的Canvas时钟效果的更多相关文章

  1. canvas时钟效果

    话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...

  2. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  3. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  4. canvas实现的时钟效果

    最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...

  5. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  6. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  7. 只有20行Javascript代码!手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  8. 【酷Q插件制作】教大家做一个简单的签到插件

    酷Q插件已经有很多了,社区分享一大堆,不过还是自己写才有乐趣,哈哈.不得不吐槽一下,酷Q竟然不更新了,出了个酷Q pro,还收费!!诶.不过这也影响不了咱写插件的心情,今天教大家写一个酷Q签到插件,虽 ...

  9. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. 3分钟教你做一个iphone手机浏览器

    3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...

随机推荐

  1. 2023平台工程崭露头角,AI 带来新机遇与挑战

    在今年,平台工程正在迅速在 IT 企业中崭露头角,成为软件开发团队的必要实践.根据 CloudBees 发布的最新报告<2023年平台工程:快速采纳和影响>,83%的受访者已经完全实施了平 ...

  2. docker 仓库-Harbor

    docker 仓库之分布式 Harbor: Harbor 是一个用于存储和分发docker镜像的企业级Registry服务器,由于Vmware 开源,其通过添加一些企业必须的功能特性,例如安全.标识和 ...

  3. C#版字节跳动SDK - SKIT.FlurlHttpClient.ByteDance

    前言 在我们日常开发工作中对接第三方开放平台,找一款封装完善且全面的SDK能够大大的简化我们的开发难度和提高工作效率.今天给大家推荐一款C#开源.功能完善的字节跳动SDK:SKIT.FlurlHttp ...

  4. xtrabackup 2.4 的介绍与使用

    抄袭转载的太多,请认准原文链接:xtrabackup的介绍与使用 前言 在网上找到教程都是复制粘贴抄袭的,而且还是陈旧资料,不得不说,当前中文互联网环境真是每况愈下. 如果你在网上找 xtraback ...

  5. Gson替换掉多漏洞的FastJson

    添加依赖: <!-- gson --> <dependency> <groupId>com.google.code.gson</groupId> < ...

  6. STL set容器

    set 使用 set 容器存储的各个键值对,要求键 key 和值 value 必须相等. 举个例子,如下有 2 组键值对数据: {<'a', 1>, <'b', 2>, < ...

  7. ${pageContext.request.contextPath}的理解和用法

    在做房产管理系统的时候用到了<from>标签的这个用法,这就来解释一下 ${pageContext.request.contextPath} 是JSP取得绝对路径的方法,等价于 ${pag ...

  8. 【Buildroot】工具包使用

    一.测试环境 开发板:rv1126 buildroot版本:2018.02-rc3 二..mk规则 PKG_NAME:定义软件包的名称.通常与软件包源代码的目录名相同. PKG_VERSION:定义软 ...

  9. C++ Qt开发:Tab与Tree组件实现分页菜单

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍tabWidg ...

  10. SpringBoot整合Filter过滤器

    话不多说,直接上核心代码 1.先创建一个Filter类 package com.qbb.reggie.filter; import com.alibaba.fastjson.JSON; import ...