JavaScript Canvas绘制圆形时钟效果代码实例

  • 更新时间:2020-03-17 09:18:59
  • 编辑:宫明达

本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下

<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  canvas{ 
   display: block; 
   margin: 0 auto; 
   background-color: #fdffad; 
   border: 1px solid #000; 
  } 
 </style> 
 <script type="text/javascript"> 
 
  document.addEventListener('DOMContentLoaded',function(){ 
   var oC=document.querySelector('canvas'); 
   var gd=oC.getContext('2d'); 
   var r=oC.width/2; 
 
   function drawBackground() { 
    gd.save(); 
    //渐变 
 
    var ra = gd.createLinearGradient(600, 0, 400, 0); 
    ra.addColorStop(1, '#2dd9ff'); 
    ra.addColorStop(0, '#8c48dd'); 
 
    //表盘 
    gd.translate(r, r); 
    gd.beginPath(); 
    gd.fillStyle = ra; 
    gd.lineWidth = 10; 
    gd.strokeStyle = '#211f4e'; 
    gd.arc(0, 0, r-5, 0, Math.PI *2, false); 
    gd.fill(); 
    gd.stroke(); 
    //数字 
    for (var i = 1; i < 13; i++) { 
     var rad=i * Math.PI * 2 / 12; 
     var x = Math.sin(rad)*(r-70); 
     var y= -Math.cos(rad)*(r-70); 
     gd.fillStyle = "red"; 
     gd.font = "bold 80px Calibri"; 
     gd.lineWidth = 1; 
     gd.textAlign = 'center'; 
     gd.textBaseline = 'middle'; 
     gd.strokeText(i, x, y); 
    } 
    //点 
    for (var i = 0; i < 60; i++) { 
     gd.beginPath(); 
     var rad=i * Math.PI * 2 / 60; 
     var x = Math.sin(rad)*(r-30); 
     var y= -Math.cos(rad)*(r-30); 
     if (i % 5 == 0) { 
      gd.fillStyle = 'red'; 
     } 
     else { 
      gd.fillStyle = '#ccc' 
     } 
     gd.lineWidth = 2; 
     gd.arc(x, y, 6, 0, Math.PI * 2, false); 
     gd.fill(); 
     gd.stroke(); 
     gd.closePath(); 
    } 
   } 
   //时针 
   function drawHour(h,m){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/12*h; 
    var mrad=2*Math.PI/12/60*m; 
    gd.rotate(rad+mrad); 
    gd.lineWidth=20; 
    gd.lineCap='round'; 
    gd.moveTo(0,10); 
    gd.lineTo(0,-r/3); 
    gd.stroke(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //分针 
   function drawMinutes(m){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/60*m; 
    gd.rotate(rad); 
    gd.lineWidth=10; 
    gd.lineCap='round'; 
    gd.moveTo(0,10); 
    gd.lineTo(0,-r/2); 
    gd.stroke(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //秒针 
   function drawSeconds(s){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/60*s; 
    gd.rotate(rad); 
    gd.fillStyle='red'; 
    gd.moveTo(-2,20); 
    gd.lineTo(2,20); 
    gd.lineTo(1,-r+100); 
    gd.lineTo(-1,-r+100); 
    gd.fill(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //圆点 
   function drawPoint(){ 
    gd.beginPath(); 
    gd.fillStyle='#fff'; 
    gd.arc(0,0,5,Math.PI*2,false); 
    gd.fill(); 
   } 
 
   function drawClock(){ 
    gd.clearRect(0,0,oC.width,oC.height); 
    var oDate=new Date(); 
    var h=oDate.getHours(); 
    var m=oDate.getMinutes(); 
    var s=oDate.getSeconds(); 
    drawBackground(); 
    drawHour(h,m); 
    drawMinutes(m); 
    drawSeconds(s); 
    drawPoint(); 
    gd.restore(); 
 
   } 
   drawClock(); 
   setInterval(drawClock,1000); 
  },false); 
 </script> 
</head> 
<body> 
<canvas width="800" height="800"></canvas> 
</body> 
</html>

效果图:

JavaScript Canvas绘制圆形时钟效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

相关教程

  • VueJS 取得 URL 参数值的方法

    form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。本文给大家简单介绍了VueJS U取得RL 参数值的方法,详细给大家介绍了vue自定义表单生成器可根据j

    发布时间:2019-09-10

  • phantomjs导出html到pdf的方法总结

    这篇文章主要介绍了phantomjs导出html到pdf的方法总结,需要的朋友可以参考下

    发布时间:2019-06-21

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

    大小:38.6 MBJavaScript电子书

  • 你不知道的JavaScript(中卷)

    你不知道的JavaScript(中卷)

    JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

    大小:7.8 MBJS电子书

  • JavaScript编程全解

    JavaScript编程全解

    JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题,无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

    大小:6.67 MBjs编程电子书

  • JavaScript框架设计

    JavaScript框架设计

    JavaScript,框架设计

    大小:286.4 MBjs框架电子书

  • JavaScript高级程序设计

    JavaScript高级程序设计

    《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜,使很多特有保持和手机客户端拓展宣布进到标准,另外也为JavaScript增加了许多融入发展方

    大小:23 MBJS程序设计电子书

  • JavaScript数据可视化编程

    JavaScript数据可视化编程

    大小:61.8 MBjs编程电子书

  • JavaScript之美

    JavaScript之美

    阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

    大小:94 MBJavaScript电子书

  • HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

    大小:65.2 MB网页制作电子书

  • 看透JavaScript:原理、方法与实践

    看透JavaScript:原理、方法与实践

    本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

    大小:251 MBJavaScript电子书

用户留言