canvas实现时钟转动

最新推荐文章于 2023-04-07 10:19:57 发布
最新推荐文章于 2023-04-07 10:19:57 发布
阅读量439 收藏 1
点赞数
分类专栏： canvas 文章标签： canvas html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_ambition/article/details/119134063
版权

1、找到canvas的 中心，画出 表心，以及 表款

2、获取当前时间，并根据时间画出 时针，分针，秒针，还有刻度

3、使用定时器，没过一秒 获取新的时间，并重新绘图，达到时钟 转动的效果

1、表心和表框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="text-align: center;">
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script src="./index.js"></script>
</html>

// index.js
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 设置中心点，此时300，300变成了坐标0，0
ctx.translate(300, 300)

/* 
// 这里的操作会造成大园于小圆连接
// 画圆线使用arc(中心点X，中心点Y，半径，起始角度，结束角度)
ctx.arc(0, 0, 100, 0, 2*Math.PI)
ctx.arc(0, 0, 5, 0, 2*Math.PI)
// 执行画线段的操作stroke
ctx.stroke() 
*/

// 画大圆
ctx.beginPath()
ctx.arc(0, 0, 100, 0, 2*Math.PI)
ctx.stroke()
ctx.closePath()

// 画小圆
ctx.beginPath()
ctx.arc(0, 0, 5, 0, 2*Math.PI)
ctx.stroke()
ctx.closePath()

2、指针和刻度

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 设置中心点，此时300，300变成了坐标0，0
ctx.translate(300, 300)

// 把状态保存起来
ctx.save()

/* 
// 这里的操作会造成大园于小圆连接
// 画圆线使用arc(中心点X，中心点Y，半径，起始角度，结束角度)
ctx.arc(0, 0, 100, 0, 2*Math.PI)
ctx.arc(0, 0, 5, 0, 2*Math.PI)
// 执行画线段的操作stroke
ctx.stroke() 
*/

// 画大圆
ctx.beginPath()
ctx.arc(0, 0, 100, 0, 2*Math.PI)
ctx.stroke()
ctx.closePath()

// 画小圆
ctx.beginPath()
ctx.arc(0, 0, 5, 0, 2*Math.PI)
ctx.stroke()
ctx.closePath()

// 获取当前时间
let time = new Date()
let hour = time.getHours() % 12
let min = time.getMinutes()
let sec = time.getSeconds()

// 时针
ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2)
ctx.beginPath()
// moveTo设置画线起点
ctx.moveTo(-10, 0)
// lineTo设置画线经过点
ctx.lineTo(40, 0)
// 设置线宽
ctx.lineWidth = 10
ctx.stroke()
ctx.closePath()
// 恢复成上一次save的状态
ctx.restore()
// 恢复完再保存一次
ctx.save()

// 分针
ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2)
ctx.beginPath()
ctx.moveTo(-10, 0)
ctx.lineTo(60, 0)
ctx.lineWidth = 5
ctx.strokeStyle = 'blue'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()

//秒针
ctx.rotate(2 * Math.PI / 60 * sec -  - Math.PI / 2)
ctx.beginPath()
ctx.moveTo(-10, 0)
ctx.lineTo(80, 0)
ctx.strokeStyle = 'red'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()

// 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的
ctx.lineWidth = 1
// 绘制分钟刻度
for (let i = 0; i < 60; i++) {
    ctx.rotate(2 * Math.PI / 60)
    ctx.beginPath()
    ctx.moveTo(90, 0)
    ctx.lineTo(100, 0)
    // ctx.strokeStyle = 'red'
    ctx.stroke()
    ctx.closePath()
}
ctx.restore()
ctx.save()
ctx.lineWidth = 5
// 绘制时钟刻度
for (let i = 0; i < 12; i++) {
    ctx.rotate(2 * Math.PI / 12)
    ctx.beginPath()
    ctx.moveTo(85, 0)
    ctx.lineTo(100, 0)
    ctx.stroke()
    ctx.closePath()
}
ctx.restore()

3、利用定时器让时钟动起来

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')


function drawClock () {

  // 把状态保存起来
  ctx.save()
  ctx.clearRect(0, 0, 600, 600)
  // 设置中心点，此时300，300变成了坐标0，0
  ctx.translate(300, 300)
  ctx.save()

  /* 
  // 这里的操作会造成大园于小圆连接
  // 画圆线使用arc(中心点X，中心点Y，半径，起始角度，结束角度)
  ctx.arc(0, 0, 100, 0, 2*Math.PI)
  ctx.arc(0, 0, 5, 0, 2*Math.PI)
  // 执行画线段的操作stroke
  ctx.stroke() 
  */

  // 画大圆
  ctx.beginPath()
  ctx.arc(0, 0, 100, 0, 2*Math.PI)
  ctx.stroke()
  ctx.closePath()

  // 画小圆
  ctx.beginPath()
  ctx.arc(0, 0, 5, 0, 2*Math.PI)
  ctx.stroke()
  ctx.closePath()

  // 获取当前时间
  let time = new Date()
  let hour = time.getHours() % 12
  let min = time.getMinutes()
  let sec = time.getSeconds()

  // 时针
  ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2)
  ctx.beginPath()
  // moveTo设置画线起点
  ctx.moveTo(-10, 0)
  // lineTo设置画线经过点
  ctx.lineTo(40, 0)
  // 设置线宽
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  // 恢复成上一次save的状态
  ctx.restore()
  // 恢复完再保存一次
  ctx.save()

  // 分针
  ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2)
  ctx.beginPath()
  ctx.moveTo(-10, 0)
  ctx.lineTo(60, 0)
  ctx.lineWidth = 5
  ctx.strokeStyle = 'blue'
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
  ctx.save()

  //秒针
  ctx.rotate(2 * Math.PI / 60 * sec -  - Math.PI / 2)
  ctx.beginPath()
  ctx.moveTo(-10, 0)
  ctx.lineTo(80, 0)
  ctx.strokeStyle = 'red'
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
  ctx.save()

  // 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的
  ctx.lineWidth = 1
  // 绘制分钟刻度
  for (let i = 0; i < 60; i++) {
      ctx.rotate(2 * Math.PI / 60)
      ctx.beginPath()
      ctx.moveTo(90, 0)
      ctx.lineTo(100, 0)
      // ctx.strokeStyle = 'red'
      ctx.stroke()
      ctx.closePath()
  }
  ctx.restore()
  ctx.save()
  ctx.lineWidth = 5
  // 绘制时钟刻度
  for (let i = 0; i < 12; i++) {
      ctx.rotate(2 * Math.PI / 12)
      ctx.beginPath()
      ctx.moveTo(85, 0)
      ctx.lineTo(100, 0)
      ctx.stroke()
      ctx.closePath()
  }
  ctx.restore()
  ctx.restore()
}

setInterval(() => {
  drawClock()
}, 1000)

小楼昨夜那事
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas实现动态时钟
joyouscola的博客
04-01 406
HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。 Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。 Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢
canvas学习18之canvas的旋转
zhangxiaochunxy的博客
03-30 1915
复习上节内容：改变canvas圆心的位置 上一节中，我们学习了如何改变一个canvas的圆心，及改变后的坐标轴展现方式，我们现在来复习一下。 改变canvas的圆心：使用translate(x,y)方法，我们可以改变canvas圆心的位置。x表示圆心在水平方向上的偏移量，y表示圆心在垂直方向的偏移量。 改变圆心位置后的坐标轴展示方式。坐标轴垂直方向为y轴，原点以上为负，原点以下为正，x和我...
用canvas制作一个实时钟表，指针随时间改变而转动
lcplayer的博客
09-23 580
利用canvas绘制的动态实时钟表，包含有钟表指针的绘制函数，随着时间变化指针会跳动
使用canvas画动态时钟
weixin_30596735的博客
07-31 109
使用到的知识： 　　1. 获取系统时间 　　2. 画图形，空心图形，实心图形，以及其它一些属性 　　3. for循环 前期准备: 　　a. HTML中准备一个容器存放画布，并为其设置width，height。 <canvas id="myCanvas" width="500" height="400">&...
基于canvas简单实现时【时间转盘】
weixin_34019144的博客
04-26 358
前几天看见有人实现了抖音很火的【时间转盘】屏保，感觉很有意思，于是就动手用canvas也实现了个，效果图如下：话不多说上代码首先，定义个canvas标签，宽高500px，黑色背景<canvas class="clock" width="500" height="500" style="background:#000;"></canvas> 复制代码其次，定义语言，我实现的很...
Android Canvas自定义实现时钟效果
08-25
本文将深入探讨如何使用Canvas自定义实现一个时钟效果。 首先，我们创建一个名为`ClockView`的自定义View类，它继承自`View`并实现了`Handler.Callback`接口。这个类的主要任务是绘制时钟，并通过`Handler`来更新...
canvas制作时钟
11-06
此外，为了让时钟持续转动，我们还需要处理旋转角度。可以使用`rotate()`方法，它会在当前坐标系中应用一个旋转变换： ```javascript ctx.save(); // 保存当前状态 ctx.translate(centerX, centerY); // 移动到圆心...
canvas时钟
12-20
在这个“canvas时钟”的项目中，我们利用了Canvas的这一特性来构建一个能够实时显示时间的时钟。下面将详细介绍这个项目涉及到的核心知识点。 1. **Canvas API**：Canvas是HTML5引入的一个新元素，它提供了一个二维...
Canvas-时钟
10-25
- `clearRect()`用于清除画布的指定区域，这对于实现动画或实时更新的场景非常关键，比如时钟的秒针每秒转动一次，就需要清除旧的图像再重新绘制。 3. **实时时钟原理** - 时钟的实现通常基于JavaScript的`...
简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果.zip
07-11
Canvas元素作为画布，通过JavaScript的绘图命令动态绘制时钟的指针和数字，实现时钟的实时转动效果。 在实现过程中，jQuery首先获取Canvas元素，并创建一个2D渲染上下文。接着，插件会设置定时器，每隔一定时间...
canvas画布制作动态时钟
qq_21948601的博客
04-07 627
canvas制作动态
【Canvas】js用canvas绘制一个钟表时钟动画效果
TA远方
11-29 1471
学习JavaScript的看过来，有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，旋转角度绘图这个重点掌握到了吗，这里有一个例子，如何用canvas画钟表时钟动图效果，接下来开始讲，边学边做。
canvas 绘制转动的钟表
weixin_43297321的博客
07-10 203
<canvas id="skyCanvas" width="600" height="600" style="background: #000;"></canvas> <script> var canvas = document.querySelector("#skyCanvas"); var brush = canvas.getContext("2d"); // 绘制静态时钟 clock(); // 使用定时器让表针动起来
Canvas时钟转动
houshufen
09-10 711
在我们的桌面上都有时钟，今天，通过canvas画布来实现这个功能，效果如下：一、canvas介绍canvas中文翻译为画布，就如同写字板，它为我们提供了一个绘画环境，我们可以在上面画自己想要画的东西。要说明的一点是canvas是通过javaScript来绘制的，想要在canvas上面画东西，我们首先必须创建一个绘画的环境：//3d绘制环境还不是很稳定 var ogc=oc.getContext("2
一个简单的时钟View（关键点：Canvas的平移与旋转）
swt369的博客
08-20 675
通过Canvas的平移与旋转简化绘图逻辑是一个非常有用的技巧，下面的时钟view就是利用这个方法完成的，省去了使用三角函数计算坐标的麻烦。
js canvas 转动时钟实例
weixin_34160277的博客
01-13 343
源码：https://pan.baidu.com/s/1R12MwZYs0OJw3OWKsc8WNw 样本：http://js.zhuamimi.cn/shizhong/ 我的百度经验：https://jingyan.baidu.com/article/1974b28935a46bf4b1f774a8.html 一、绘制圆盘 arc 方法：来构造圆形，其中 起始角设置为 0，结束角...
canvas画布：不断旋转的心
一只程序媛
09-04 1339
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canvas{ back
canvas rotate()画布的旋转详解
热门推荐
dayewandou的博客
10-14 4万+
刚才还是风和日丽的天，这没一会会就乌云密布了，雨呀，眼瞅就下来了呢，一场秋雨一场寒，感觉懂得要穿棉袄了的节奏 10月1号之前，还是T恤呢，10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了，这真的是8天过了一个季节呀~~~ 大概北方的秋天都是这么快的吧 继续来看看canvas的rotate()方法 rotate()旋转当前的绘图。 语法：context.rotate(angle) 参
实现HTML5 Canvas绘制时钟
最新发布
06-01
<title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> function drawClock() { // 获取Canvas元素 var canvas = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值