JavaScript Canvas绘制圆形时钟效果

2024-12-19 10:58:56

本文实例为大家分享了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 html5 canvas绘制时钟效果(二)

对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么
js Canvas实现圆形时钟教程

阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid
JavaScript学习小结之使用canvas画“哆啦A梦”时钟

前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈然后是上代码 html部分 <canvas id="
JavaScript html5 canvas绘制时钟效果

本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
JS+Canvas绘制时钟效果

本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t
js+html5实现canvas绘制网页时钟的方法

本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex
js Canvas绘制圆形时钟效果

本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px
js Canvas绘制圆形时钟教程

本文实例为大家分享了Canvas绘制圆形时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-clock</title> </head> <body> <canvas id="canvas" width=&
最丑的时钟效果！js canvas时钟制作方法

今日就发个丑丑的时钟,老实说有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~ (┬＿┬) 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #eee; } canvas{ ba
js Canvas实现的日历时钟案例分享

Html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="requestNextAnimationFrame.js"></script> <script src="calendarWithTime.js">&

JavaScript Canvas绘制圆形时钟效果

相关推荐

随机推荐