JavaScript canvas动画实现时钟效果

2024-12-24 03:34:30

本文实例为大家分享了canvas动画实现时钟效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>时钟特效</title>
</head>
<body>
  <canvas width="150" height="150" id="canvas"></canvas>
</body>
</html>
<script>
  clock();// 显示
  setInterval(clock,1000);// 每一秒重绘一次，达到转动效果
  function clock(){
    var now = new Date();// 得到当前日期与时间
    var second = now.getSeconds(),
      min = now.getMinutes(),
      hour = now.getHours();// 得到时分秒
      hour = hour > 12?hour-12:hour;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,150,150);// 初始化画布
    ctx.save();
    ctx.translate(75,75);// 平移坐标原点
    ctx.scale(0.4,0.4);//缩放效果
    ctx.rotate(-Math.PI/2);// 将x轴旋转-90
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 8;
    ctx.lineCap = 'round';

    // 显示时针刻度
    ctx.save();
    ctx.beginPath();
    for(var i = 0;i<12;i++)
    {
      ctx.rotate(Math.PI/6);
      ctx.moveTo(100,0);
      ctx.lineTo(120,0);
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();// 恢复
    ctx.save();

    // 显示秒针刻度
    ctx.beginPath();
    ctx.lineWidth = 5;
    for(var i = 0;i < 60; i++)
    {
      if(i % 5 != 0)
      {
        ctx.moveTo(117,0);
        ctx.lineTo(120,0);
      }
      ctx.rotate(Math.PI/30);// 转6度
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();// 恢复
    ctx.save();

    // 绘制时针
    ctx.beginPath();
    ctx.rotate((Math.PI / 6)*hour + (Math.PI/360)*min + (Math.PI /21600)*second)//时针当前指向的位置
    ctx.lineWidth = 14;
    ctx.moveTo(-20,0);
    ctx.lineTo(75,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//恢复
    ctx.save();

    // 绘制分针
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 10;
    ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*second);// 分针当前的位置
    ctx.moveTo(-28,0);
    ctx.lineTo(102,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//恢复
    ctx.save();

    // 绘制秒针
    ctx.beginPath();
    ctx.rotate(Math.PI/30*second);
    ctx.strokeStyle = '#D40000';
    ctx.lineWidth = 6;
    ctx.moveTo(-30,0);
    ctx.lineTo(83,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//恢复
    ctx.save();

    //绘制表框
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#325Fa2';
    ctx.arc(0,0,142,0,Math.PI*2,true);//半径142
    ctx.stroke();
    ctx.closePath();
    ctx.restore()//恢复
    ctx.restore()//恢复

  }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript html5 canvas绘制时钟效果(二)

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

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

本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #0
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
基于javascript实现动态时钟效果

本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
JavaScript Canvas编写炫彩的网页时钟

本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网
javascript+HTML5 canvas绘制时钟功能示例

本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent
JavaScript实现简单的时钟实例代码

复制代码代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
javascript结合Canvas 实现简易的圆形时钟

之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟.时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下: 演示效果: html代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
五步轻松实现JavaScript HTML时钟效果

学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~) 接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p

JavaScript canvas动画实现时钟效果

相关推荐

随机推荐