canvas学习（二）:绘制时钟

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

需求

绘制一个简单时钟，要求
：1、时分秒、表盘
	2、随真实时间进行变化

结果图：
在这里插入图片描述

步骤

  1. canvas基本对象
<canvas id="canvas1" width="800" height="600">
   你的浏览器不支持canvas
 </canvas>
 <script>
   // 1、找到画布对象
   /** @type {HTMLCanvasElement} */
   var canvas= document.getElementById('canvas1')
   console.log([canvas])
   // 2、上下文对象，画笔
   var ctx=canvas.getContext('2d') // 用于2d对象绘制 webgl是3d引擎
   ctx.save() // 保持最原始的坐标状态
 </script>
  1. 绘制表盘
绘制表盘
1、先移动坐标原点到画布中央（这样画圆就不需要计算坐标）
2、保存此刻的坐标池状态，方便其他绘制
2、绘制一个半径200的圆作为表盘最外层

// 绘制表盘
     // 以坐标原点为圆心 移动到画布的中央
     ctx.translate(400,300)
     ctx.save() // 保存状态
     ctx.beginPath() // 开始绘制
     ctx.arc(0,0,200,0,2*Math.PI) // 坐标x,y 半径 弧度
     ctx.strokeStyle="darkgrey" // 颜色
     ctx.lineWidth=10 // 线段宽度
     ctx.stroke()
     ctx.closePath() // 表盘绘制结束
  1. 绘制时、分刻度
顺序：分->时
原因（后面绘制的会把前面绘制的覆盖）

// 绘制秒钟刻度 先分->时 (原因：后面绘制的会把前面绘制的覆盖掉)
      // 绘制分钟刻度
      for(var j=0;j<60;j++){
        ctx.rotate(Math.PI/30) // 每次旋转坐标池6度
        ctx.beginPath()
        ctx.moveTo(190,0) // 线段的起点
        ctx.lineTo(200,0) // 线段的终点
        ctx.lineWidth=2
        ctx.strokeStyle="orangered"
        ctx.stroke()
        ctx.closePath()
      }

 	ctx.restore() // 恢复到中央坐标原点状态
    ctx.save() // 保存当前的中央坐标原点状态
    // 绘制刻度
    // 绘制12个时钟刻度
    for(var i=0;i<12;i++){
      ctx.rotate(Math.PI/6) // 每次旋转坐标池30度
      ctx.beginPath()
      ctx.moveTo(180,0)
      ctx.lineTo(200,0)
      ctx.lineWidth=10
      ctx.strokeStyle="darkgrey"
      ctx.stroke()
      ctx.closePath()
    }
  1. 绘制时针、分针、秒针
1、先把圆逆时针旋转90°，保证x轴在上面（原因：刻度为0点的时候，时针在x轴上）
2、顺序：秒针-分针-时针
3、时间计算（12小时制）
4、位置计算、时分秒针样式绘制

     // 在绘制表盘的时候添加坐标池逆时针旋转
     // 以坐标原点为圆心 移动到画布的中央
     ctx.translate(400,300)
 ++ ctx.rotate(-Math.PI/2) // 逆时针旋转90° 保证x轴是上面的 方便计算时分秒针刻度 比如：0时时针是在x轴上
     ctx.save() // 保存状态
     ctx.beginPath() // 开始绘制
     ctx.arc(0,0,200,0,2*Math.PI) // 坐标x,y 半径 弧度
     ctx.strokeStyle="darkgrey"
     ctx.lineWidth=10
     ctx.stroke()
     ctx.closePath() // 表盘绘制结束

// 时间
   	 var time = new Date()
     var hour = time.getHours()
     var min = time.getMinutes()
     var sec = time.getSeconds()
     hour=hour>12?hour-12:hour // 原因：表盘是12小时制
     console.log(hour+':'+min+':'+sec)

// 绘制秒针
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     // 根据秒针的时间进行旋转 1圈有60秒
     ctx.rotate(2*Math.PI/60*sec)
     ctx.moveTo(-30,0)
     ctx.lineTo(170,0)
     ctx.lineWidth=2
     ctx.strokeStyle="red"
     ctx.stroke()
     ctx.closePath()

// 绘制分针
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     // 根据分针的时间进行旋转 1圈有60分钟 一圈有3600秒
     ctx.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)
     ctx.moveTo(-20,0)
     ctx.lineTo(150,0)
     ctx.lineWidth=4
     ctx.strokeStyle="darkblue"
     ctx.stroke()
     ctx.closePath()

	// 绘制时针
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     // 根据时针的时间进行旋转 1圈有12小时 一圈有12*60分 一圈有60*60*12秒
     ctx.rotate(2*Math.PI/12*hour+2*Math.PI/60/12*min+2*Math.PI/60/60/12*sec)
     ctx.moveTo(-10,0)
     ctx.lineTo(140,0)
     ctx.lineWidth=6
     ctx.strokeStyle="darkslategray"
     ctx.stroke()
     ctx.closePath()

// 绘制圆心 表盘的中心
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     ctx.arc(0,0,10,0,2*Math.PI)
     ctx.fillStyle = "deepskygray"
     ctx.fill()
     ctx.closePath()
  1. 每秒定时函数
1、先回到最初坐标原点状态
ctx.restore() // 回到中央坐标原点状态
ctx.restore() // 回到最初原点位置
2、每秒执行的定时器函数
setInterval(()=>{
     renderClock()
   },1000)
3、重复清楚画布重画逻辑
ctx.clearRect(0,0,800,600) // 清除之前的画布，重新画
  1. 全部代码
 <script>
   // 1、找到画布对象
   /** @type {HTMLCanvasElement} */
   var canvas= document.getElementById('canvas1')
   console.log([canvas])
   // 2、上下文对象，画笔
   var ctx=canvas.getContext('2d') // 用于2d对象绘制 webgl是3d引擎
   // 3、绘制图像
   // 画圈圈、画刻度 每隔一秒画一次

   // 不断的更新时间
   function renderClock(){
     ctx.clearRect(0,0,800,600) // 清除之前的画布，重新画
     ctx.save() // 保持最原始的坐标状态
     // 绘制表盘
     // 以坐标原点为圆心 移动到画布的中央
     ctx.translate(400,300)
     ctx.rotate(-Math.PI/2) // 逆时针旋转90° 保证x轴是上面的 方便计算时分秒针刻度 比如：0时时针是在x轴上
     ctx.save() // 保存状态
     ctx.beginPath() // 开始绘制
     ctx.arc(0,0,200,0,2*Math.PI) // 坐标x,y 半径 弧度
     ctx.strokeStyle="darkgrey"
     ctx.lineWidth=10
     ctx.stroke()
     ctx.closePath() // 表盘绘制结束

     // 绘制秒钟刻度 先分->时 (原因：后面绘制的会把前面绘制的覆盖掉)
     // 绘制分钟刻度
     for(var j=0;j<60;j++){
       ctx.rotate(Math.PI/30) // 每次旋转坐标池6度
       ctx.beginPath()
       ctx.moveTo(190,0)
       ctx.lineTo(200,0)
       ctx.lineWidth=2
       ctx.strokeStyle="orangered"
       ctx.stroke()
       ctx.closePath()
     }

     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     // 绘制刻度
     // 绘制12个时钟刻度
     for(var i=0;i<12;i++){
       ctx.rotate(Math.PI/6) // 每次旋转坐标池30度
       ctx.beginPath()
       ctx.moveTo(180,0)
       ctx.lineTo(200,0)
       ctx.lineWidth=10
       ctx.strokeStyle="darkgrey"
       ctx.stroke()
       ctx.closePath()
     }
     
     // 绘制时分秒针
     var time = new Date()
     var hour = time.getHours()
     var min = time.getMinutes()
     var sec = time.getSeconds()
     hour=hour>12?hour-12:hour // 原因：表盘是12小时制
     console.log(hour+':'+min+':'+sec)
     // 绘制秒针
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     // 根据秒针的时间进行旋转 1圈有60秒
     ctx.rotate(2*Math.PI/60*sec)
     ctx.moveTo(-30,0)
     ctx.lineTo(170,0)
     ctx.lineWidth=2
     ctx.strokeStyle="red"
     ctx.stroke()
     ctx.closePath()

     // 绘制分针
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     // 根据分针的时间进行旋转 1圈有60分钟 一圈有3600秒
     ctx.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)
     ctx.moveTo(-20,0)
     ctx.lineTo(150,0)
     ctx.lineWidth=4
     ctx.strokeStyle="darkblue"
     ctx.stroke()
     ctx.closePath()

     // 绘制时针
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     // 根据时针的时间进行旋转 1圈有12小时 一圈有12*60分 一圈有60*60*12秒
     ctx.rotate(2*Math.PI/12*hour+2*Math.PI/60/12*min+2*Math.PI/60/60/12*sec)
     ctx.moveTo(-10,0)
     ctx.lineTo(140,0)
     ctx.lineWidth=6
     ctx.strokeStyle="darkslategray"
     ctx.stroke()
     ctx.closePath()

     // 绘制圆心 表盘的中心
     ctx.restore() // 恢复到中央坐标原点状态
     ctx.save() // 保存当前的中央坐标原点状态
     ctx.beginPath()
     ctx.arc(0,0,10,0,2*Math.PI)
     ctx.fillStyle = "deepskygray"
     ctx.fill()
     ctx.closePath()
     
     ctx.restore() // 回到中央坐标原点状态
     ctx.restore() // 回到最初原点位置
   }
   
   setInterval(()=>{
     renderClock()
   },1000)
 </script>
Best_卡卡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas简单绘制时钟
weixin_49411859的博客
07-18 197
html部分： <canvas id="canvas" width="800" height="600"></canvas> js部分： class Clock { constructor(){ this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); } init(){
canvas实现时钟转动
T_ambition的博客
07-27 439
1、找到canvas的中心，画出表心，以及表款 2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度 3、使用定时器，没过一秒获取新的时间，并重新绘图，达到时钟转动的效果 1、表心和表框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
微信小程序开发之——时钟-Canvas介绍(1)
最新发布
2401_84121674的博客
04-20 1085
/1- 使用 wx.createContext 获取绘图上下文 context//2-设置填充色//3-绘制图形形状//4-开始绘制},
webGL第六课——二维平面真实坐标到webGL坐标转换
lzwdlut的博客
08-24 2286
在学习过程中，推导一下真是坐标系到webGL坐标系转换的通用计算方法，前提是webGL完全占据canvas画布位置。
canvas绘制时钟刻度表
libinbin147256369的博客
05-05 2995
canvas绘制时钟刻度表1.首先看一下效果图2.基本知识点canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线canvas.drawLine:绘制线段，指定起始位置就好canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态canvas.restore:恢复到保存时候的canvas状态，这么...
canvas绘制时钟表盘
djz917的博客
06-08 2051
关于canvas的API操作详情请阅读文档https://www.runoob.com/html/html5-canvas.html先来看下效果图：首先，需要绘制两个圆形作为表盘var drawing=document.getElementById("drawing"); var context=drawing.getContext("2d"); context.beginPath(); //绘...
canvas学习（十六）：绘制时钟
05-03
在本篇【canvas学习（十六）：绘制时钟】中，我们将探讨HTML5中的Canvas API，它是Web开发中用于在网页上动态绘制图形的强大工具。Canvas API允许开发者使用JavaScript来绘制2D图形，包括简单的线条、形状以及复杂的...
JavaScript Canvas绘制时钟
02-22
接下来，我们将在`clock.js`中编写JavaScript代码来绘制时钟： ```javascript document.addEventListener('DOMContentLoaded', function() { var canvas = document.getElementById('clock'); var ctx = canvas....
canvas绘制表盘时钟
08-31
总的来说，使用Canvas API绘制表盘时钟是一个很好的实践项目，它展示了如何利用JavaScript和Canvas API实现动态、交互式的网页图形。这个过程涉及到数学（如角度计算）、时间和日期处理，以及图形绘制技巧，对提升...
使用canvas绘制超炫时钟
09-28
接下来，我们开始绘制时钟。时钟分为以下几个部分： 1. **表盘**：使用径向渐变填充，创建12个扇形段，模拟钟面的刻度。首先保存当前的绘图状态，然后进行坐标转换，将原点移动到画布中心。计算每个刻度的角度（deg...
canvas 绘制圆形时钟
08-31
为了绘制时钟的背景，我们定义了一个名为`drawBackground`的函数。这个函数会画出一个圆圈作为时钟的外框，标注小时数字，并绘制60个小圆点表示分钟刻度： ```javascript function drawBackground() { ctx.save();...
HTML5：canvas制作时钟
02-22
每周定期有公开直播课，有业内大咖为你授业解惑，真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!
js+html5实现canvas绘制网页时钟的方法
11-23
本文实例讲述了js+html5实现canvas绘制网页时钟的方法，画的是一个可用于网页的、带摆的钟表，可以通过按钮调整其大小和位置，具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> [removed] var xClock=300; //表心位置 var yClock=250; //表心位置 var d=180.0;//钟表圆面的半径 var value = -d*1.07
canvas绘制精细走动时钟
小圣贤君的博客
11-16 5323
这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图： 颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
绘制走动的时钟
itscassie_的博客
09-18 1149
&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;             body
用canvas画时钟（一步步详解附带源代码）
yf19990720的博客
07-15 6416
canvas绘制时钟，结合了js和canvas，让canvas所绘制的不再只是静止不动的画。希望大家在阅读完之后，有更简单的绘制方法，请在评论区留言，谢谢。
Android自定义View——绘制一个会动的时钟
David-Kuper的专栏
01-15 2099
绘制时钟的时候将时钟拆分为外圆、刻度、指针三个组成部分，使得绘制的流程变得清晰，便于代码结构管理和修改；在绘制图形的时候进行坐标系的变换以简化计算复杂度。
js+html5实现canvas绘制网页时钟的方法.docx
01-19
该文档详细阐述了如何使用JavaScript和HTML5的Canvas API来实现一个动态的网页时钟，包括绘制钟表盘面、指针以及模拟摆动的钟摆。这个时钟允许用户通过按钮调整大小和位置，提高了用户体验。 在JavaScript中，`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值