用canvas写的钟表小例子

最新推荐文章于 2023-10-26 08:47:56 发布
最新推荐文章于 2023-10-26 08:47:56 发布
阅读量145 收藏
点赞数
分类专栏： js 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ace15824843202/article/details/84388141
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表盘</title>

</head>
<body>
<canvas id="cas" style="border:1px solid black" width="500" height="500">
</canvas>
</body>

</html>
<script>
  window.onload=function () {
      let cas=document.getElementById('cas').getContext('2d');

      function clock(){
          // 表盘
          cas.lineWidth=2;
          cas.font='16px arial';
          cas.strokeText('Bestdon',200,200);
          cas.stroke();
          cas.clearRect(0,0,500,500);
          cas.beginPath();
          cas.lineWidth=10;
          cas.arc(250,250,200,0,2*Math.PI);
          cas.closePath();
          cas.stroke();
        
            //字体
          cas.lineWidth=1;
          cas.font='20px arial';
          cas.strokeText('Bestdon',216,150);
          cas.stroke();


          //时针刻度
          for(var i =0 ;i<12;i++){
              cas.save();
              cas.beginPath();
              cas.translate(250,250);
              cas.rotate(Math.PI/6*i);
              cas.lineWidth=8;
              cas.moveTo(0,-200);
              cas.lineTo(0,-170);
              cas.stroke();
              cas.restore();
          }
          //分钟刻度
          for(var i =0 ;i<60;i++){
              cas.save();
              cas.beginPath();
              cas.translate(250,250);
              cas.rotate(Math.PI/30*i);
              cas.lineWidth=6;
              cas.moveTo(0,-200);
              cas.lineTo(0,-180);
              cas.stroke();
              cas.restore();
          }
            
            //    获取当地时间
          let date = new Date();
          let hours = date.getHours(),
              min = date.getMinutes(),
              sec = date.getSeconds();
          //console.log(hours);
          let hours12 = hours+min/60;
          //console.log(hours12);
          hours12=hours12>12?hours12-12:hours12;
          //console.log(hours12);

          //秒针
          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.rotate(sec*Math.PI/30);
          cas.lineWidth=1;
          cas.strokeStyle='red';
          cas.moveTo(0,10);
          cas.lineTo(0,-100);
          cas.stroke();
          cas.restore();
            
        //分针
          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.rotate(min*Math.PI/30);
          cas.lineWidth=2;
          cas.strokeStyle='blue';
          cas.moveTo(0,0);
          cas.lineTo(0,-80);
          cas.stroke();
          cas.restore();

         //时针
          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.rotate(hours12*(Math.PI/6));
          cas.lineWidth=4;
          cas.strokeStyle='black';
          cas.moveTo(0,0);
          cas.lineTo(0,-60);
          cas.stroke();
          cas.restore();

          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.lineWidth=1;
          cas.fillStyle='black';
          cas.arc(0,0,5,0,2*Math.PI);
          cas.fill();
          cas.restore();
      }
      clock();
      let autoPlay=null;
      clearInterval(autoPlay);
      autoPlay=setInterval(()=> {
          clock();
      },1000)


  }

</script>

ace_TiAmo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas绘制一个时钟
秃头小桂子
05-11 2175
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
使用canvas绘制钟表
11-06
使用canvas绘制钟表 使用canvas绘制钟表 使用canvas绘制钟表
canvas常用方法，canvas绘制时钟案例
最新发布
study_way的博客
10-26 208
在路径对象上，使用不同的绘图命令来定义路径的形状。
canvas画时钟
pumpkin_truck的博客
06-04 2458
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
html：canvas画布绘图简单入门-绘制时钟-3
彭世瑜的博客
01-01 1445
示例10：绘制时钟 <canvas id="canvas" width="600" height="600"></canvas> <script> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width
canvas时钟绘制方法总结
monparadis的博客
11-04 747
1.首先需要一个画布，因为要画时钟肯定需要计算角度，Math.PI*degree/180，所以将Math.PI存起来 2.绘制表盘，表盘是由60个刻度线构成，时间整点刻度是5的倍数，用着个特点来算刻度线的颜色和宽度 3.绘制时钟一定要知道时间，然后计算时分秒角度 4.绘制时分秒 5.指针时刻在走动，每次绘制记得把画布清空，上面绘制表盘里面使用了清空方法 注意点：每次的状态记得保存，每一帧画完记得清空 绘制完一帧记得使用closePath的方法...
微信小程序canvas画板手写签名
03-12
通过小程序canvas原生组件方法，实现对画布的基本操作并扩展相关功能，实现在线签名功能，支持翻页、撤销、清空、生成图片，并增加田字格底图
canvas实现钟表效果
08-31
本文主要分享了canvas实现钟表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
vue使用canvas实现移动端手写签名
10-14
主要为大家详细介绍了基于vue使用canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5canvas 写的指针式钟表
09-18
网页游戏源码，基于html5+canvas+javascript实现了一个指针式钟表，时间和本地计算机时间同步
Canvas时钟绘制
01-20
用Canvas绘制一个时钟。
canvas写一个时钟
09-19
实现时钟的分针、时针和秒针的旋转移动
Canvas之绘制时钟
summer爱前端
08-18 1308
用canvas画一个时钟玩玩吧，比css+js简单太多了……
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7875
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
canvas---用canvas制作钟表
maidu_xbd的博客
05-14 1050
首先，看效果~~~绘制钟表如图 思路： （1）绘制一个60等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成60分钟的刻度。 - （2）继续在以上基础上，绘制一个12等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成12小时的刻度。 注意调整画线的宽度，以明显区分时针的刻度和分针的刻度。 (3)获取本地时间，并绘制时针，分针，秒针弧度。弧度=角度*Math.PI/180...
Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()用法与区别
ace15824843202的博客
04-28 1718
Promise.all()；Promise.allSettled();Promise.any();Promise.race()
jq与js区别混淆（二）
ace15824843202的博客
11-19 867
jq操作class addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 js操作class element.className = 'XXX'  所选中的节点的class设置为XXX jq操作css样式 $(selector).css({"propertyn...
jquery与js区别混淆（一）
ace15824843202的博客
11-15 479
jQuery 入口函数: $(document).ready(function(){ // 执行代码 }); 或者 $(function(){ // 执行代码 }); JavaScript 入口函数: window.onload = function () { // 执行代码 } jQuery 入口函数与 JavaScript 入口函数的区别： jQuery...
Go.js（HTML5 交互性图形库）笔记
ace15824843202的博客
12-07 460
参考链接
用canvas写个动态钟表
08-22
### 回答1： 可以使用HTML5 Canvas元素来创建动态钟表。首先，在HTML文件中创建一个Canvas元素，并在JavaScript中使用Canvas API来绘制钟表。具体来说，可以使用Canvas中的绘图命令(如arc()和lineTo())来绘制钟表的表盘和指针。然后，可以使用JavaScript的setInterval()函数来更新钟表的显示，以反映当前时间。 示例代码如下： ```html <canvas id="clock"></canvas> <script> var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx. ### 回答2： 使用canvas绘制一个动态钟表可以通过以下步骤来完成： 1. 创建一个HTML文件，并在文件中添加一个canvas元素。 2. 在JavaScript文件中获取canvas元素，并设置其宽度和高度。 3. 创建一个函数来获取当前的日期和时间，并将其分解为小时、分钟和秒钟。 4. 创建一个函数来绘制钟表的外观。可以使用canvas的API函数来绘制一个圆形表盘和时刻刻度。 5. 创建一个函数来绘制时针、分针和秒针。使用canvas的API函数来绘制不同长度和角度的线条表示时针、分针和秒针的位置。 6. 在一个循环中，每秒钟调用一次时钟更新函数，并在canvas上清除前一秒钟的绘制结果，然后重新绘制新的时钟。 以上是一个基本的思路，根据个人想法和需求，可以在钟表上添加更多的细节和装饰，例如数字时钟、指针的颜色和形状等。此外，还可以使用HTML和CSS来添加一些交互效果，例如在点击钟表时弹出当前时间的提示框。总的来说，使用canvas绘制动态钟表可以灵活展示时间，并且可根据需求进行个性化的设计。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值