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 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
ajax与jsonp的区别及用法
Oct 16 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
短波的认识
2021/03/01 无线电
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python使用configparser库读取配置文件
2020/02/22 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
预备党员承诺书
2014/03/25 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
婚育证明样本
2015/06/16 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP