javascript canvas实现简易时钟例子


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了javascript canvas实现简易时钟的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>钟表</title>
  <script type="text/javascript">
  window.onload=function(){
    //1.获取画布
    var canvas=document.getElementById("canvas");
    //2.获取上下文对象(获取画笔)
    var cx=canvas.getContext("2d");
    //3.设置画笔样式
    function clock(){
      cx.fillStyle="tomato";
    //4.绘制图形
      //绘制表盘
      cx.beginPath(); //绘制圆形
      cx.arc(300,300,200,0,Math.PI*2);//设置圆 arc(x,y,r,begin,end,c);x,y:圆的圆的圆心坐标 r:圆的半径 begin,end:开始角度和结束角度;Math.PI=180 Math.PI/180=1度 c:是否按照逆时针进行绘制true:按照逆时 false:顺时针
      cx.closePath();//关闭路径
      cx.fill();//
      //绘制时刻度
        cx.lineWidth=2;
        cx.strokeStyle="black";
        for(var i=0;i<12;i++){
          cx.save();
          cx.translate(300,300);//形移
          cx.rotate(i*(Math.PI/6));
          
          cx.beginPath();
          cx.moveTo(0,-180);
          cx.lineTo(0,-200);
          cx.stroke();
          cx.closePath();

          cx.fillStyle="black";//绘制数字
          cx.font="16px blod";
          cx.rotate(Math.PI/6);
          cx.fillText(i+1,-6,-220);//文字

          cx.restore();
        }

      //绘制分刻度
      for(var i=0;i<60;i++){
        cx.save();
        cx.translate(300,300);
        cx.rotate(i*(Math.PI/30));

        cx.beginPath();
        cx.moveTo(0,-190);
        cx.lineTo(0,-200);
        cx.stroke();
        cx.closePath();

        cx.restore();
      }
      
      //获取当前时间
      var today=new Date();
      var hour=today.getHours();
      var min=today.getMinutes();
      var sec=today.getSeconds();

      hour=hour+min/60;
      
      //绘制时针
      cx.lineWidth=4;
      cx.save();
      cx.translate(300,300);
      cx.beginPath();
      cx.rotate(hour*(Math.PI/6));//旋转
      cx.moveTo(0,10);
      cx.lineTo(0,-130);
      cx.closePath();
      cx.stroke();
      cx.restore();   //回滚

      //绘制分针
      cx.lineWidth=2;
      cx.save();
      cx.translate(300,300);
      cx.beginPath();
      cx.rotate(min*(Math.PI/30));
      cx.moveTo(0,10);
      cx.lineTo(0,-160);
      cx.closePath();
      cx.stroke();
      cx.restore();   //回滚

      //绘制秒针
      cx.lineWidth=1;
      cx.strokeStyle="black";
      cx.save();
      cx.translate(300,300);
      cx.beginPath();
      cx.rotate(sec*(Math.PI/30));
      cx.moveTo(0,10);
      cx.lineTo(0,-160);
      cx.closePath();
      cx.stroke();
      cx.restore();  

      //绘制交叉处
      cx.fillStyle='#ccc';
      cx.strokeStyle="red";
      cx.save();
      cx.translate(300,300);
      cx.beginPath();
      cx.beginPath();
      cx.arc(0,0,4,0,Math.PI*2);
      cx.closePath();
      cx.fill();
      cx.closePath();
      cx.stroke();
      cx.restore();
      
      setTimeout(clock,1000);
    }
   
    // setInterval(clock,1000);
    clock();
  }
  </script>
</head>
<body>
  <canvas id="canvas" width="1300px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
给Function做的OOP扩展
May 07 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
简单实现jquery焦点图
Dec 12 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
小程序实现搜索框功能
Mar 26 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
vue中使用vue-pdf的方法详解
Sep 05 #Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 #Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 #Javascript
js实现可爱的气泡特效
Sep 05 #Javascript
js实现点击按钮随机生成背景颜色
Sep 05 #Javascript
javascript实现一款好看的秒表计时器
Sep 05 #Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
You might like
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
srcElement表格样式
2006/09/03 Javascript
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解redux异步操作实践
2018/08/15 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
生产主管岗位职责
2013/11/10 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
服务质量承诺书
2014/03/27 职场文书
无偿献血倡议书
2014/04/14 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
2014年政教处工作总结
2014/12/20 职场文书
开票员岗位职责
2015/02/12 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python