canvas画动态时钟

Miyang 发布于2019-08-20 17:26 / 2671人阅读

摘要：用画动态时钟代码代码保存当前画布样式切换中心点画外圆画数字画时刻画时针，分针，秒针将分，秒换算成小时返回上一个画布样式将秒换算成分画圆心将所有事件封装在一个函数中，为制作成动态时钟做准备清空整个画布初始化

用canvas画动态时钟

HTML代码


  
    :
    :

css：

*{margin: 0;padding: 0;}
div{
  text-align: center;
}
div.box{
  margin: 50px auto;
  text-align: center;
  font-size: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
}
span{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border:2px solid #ccc;
  font-size: 20px;
  margin: 0px 20px;
}

js代码

  var hourspan =document.getElementById("hour");
  var minutespan =document.getElementById("minute");
  var secondspan =document.getElementById("second");
  var dom = document.getElementById("clock");
  var ctx = dom.getContext("2d");
  var width = ctx.canvas.width;
  var height = ctx.canvas.height;
  var r = width/2;
  

  function drawBackground(){
    ctx.save(); //保存当前画布样式
    ctx.translate(r,r);//切换中心点
//画外圆
    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.arc(0,0,r-5,0,2*Math.PI,false);
    ctx.stroke();
//画数字
    var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    hourNumber.forEach(function(item,index){
      var rad = 2*Math.PI/12*index;
      var x = Math.cos(rad)*(r-30);
      var y = Math.sin(rad)*(r-30);
      ctx.fillText(item,x,y);
    })
//画时刻
    for(var i=0;i<60;i++){
      var rad = 2*Math.PI/60*i;
      var x = Math.cos(rad)*(r-15);
      var y = Math.sin(rad)*(r-15);
      ctx.beginPath();
      ctx.arc(x,y,2,0,Math.PI*2,false);
      if(i%5 == 0){
        ctx.fillStyle = "#000";
        ctx.fill();
      }else{
        ctx.fillStyle = "#ccc";
        ctx.fill();
      }
    }
  }
//画时针，分针，秒针
  function drawHour(hour,minute,second){
    ctx.save();
    ctx.beginPath();
    var rad = 2*Math.PI/12*hour+((2*Math.PI/12)*(minute+second/60)/60);//将分，秒换算成小时
    ctx.rotate(rad);
    ctx.strokeStyle = "#000";
    ctx.lineWidth = 4;
    ctx.lineCap = "round";
    ctx.moveTo(0,10);
    ctx.lineTo(0,-r/2);
    ctx.stroke();
    ctx.restore();//返回上一个画布样式
  }
  function drawMinute(minute,second){
    ctx.save();
    ctx.beginPath();
    var rad = 2*Math.PI/60*minute+(2*Math.PI/60)*(second/60);//将秒换算成分
    ctx.rotate(rad);
    ctx.strokeStyle = "#000";
    ctx.lineWidth = 6;
    ctx.lineCap = "round";
    ctx.moveTo(0,15);
    ctx.lineTo(0,-(r-25));
    ctx.stroke();
    ctx.restore();
  }
  function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = "red";
    var rad = 2*Math.PI/60*second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap = "round";
    ctx.moveTo(0,20);
    ctx.lineTo(0,-(r-15));
    ctx.stroke();
    ctx.restore();
  }
//画圆心
  function drawCicle(){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle ="#fff";
    ctx.arc(0,0,2,0,Math.PI*2,false);
    ctx.fill();
    ctx.restore();
  }
  
  
  //将所有事件封装在一个函数中，为制作成动态时钟做准备
  function timeActive(){
    ctx.clearRect(0,0,width,height);//清空整个画布
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    hourspan.innerText = hour;
    minutespan.innerText = minute;
    secondspan.innerText = second;
    drawBackground();
    drawHour(hour,minute,second);
    drawMinute(minute,second);
    drawSecond(second);
    drawCicle();
    ctx.restore();
  }
  timeActive();//初始化画布
  setInterval("timeActive()",1000);

小生初出茅庐，希望各位海涵，看见网上的教学视频后，感觉挺有意思的，手敲了一遍。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83582.html

canvas画动态时钟

摘要：用画动态时钟代码代码保存当前画布样式切换中心点画外圆画数字画时刻画时针，分针，秒针将分，秒换算成小时返回上一个画布样式将秒换算成分画圆心将所有事件封装在一个函数中，为制作成动态时钟做准备清空整个画布初始化用canvas画动态时钟 showImg(https://segmentfault.com/img/bVPBM0?w=528&h=423); HTML代码 : ...

shadajin 2019-08-29 12:49 评论0 收藏0
canvas画动态时钟

摘要：用画动态时钟代码代码保存当前画布样式切换中心点画外圆画数字画时刻画时针，分针，秒针将分，秒换算成小时返回上一个画布样式将秒换算成分画圆心将所有事件封装在一个函数中，为制作成动态时钟做准备清空整个画布初始化用canvas画动态时钟 showImg(https://segmentfault.com/img/bVPBM0?w=528&h=423); HTML代码 : ...

BearyChat 2019-08-01 17:01 评论0 收藏0
认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeo

摘要：最近做的两个项目都是关于的，做完整理一下，方便下一次使用，在里写的小，功能画扇形动态画圆弧结合做的动画画表盘创建一个对象方法开始画笔设置填充颜色是顺时针是逆时针默认是逆时针结束画笔开始填充没有直接创建一个对象方法开始画笔设置填充颜色是顺时针最近做的两个项目都是关于canvas的，做完整理一下，方便下一次使用，在vue里写的小demo，功能：画扇形动态画圆弧（requestAnima...

xietao3 2019-08-26 13:42 评论0 收藏0
认识canvas（画扇形动态画圆弧（requestAnimationFrame结合settimeo

摘要：最近做的两个项目都是关于的，做完整理一下，方便下一次使用，在里写的小，功能画扇形动态画圆弧结合做的动画画表盘创建一个对象方法开始画笔设置填充颜色是顺时针是逆时针默认是逆时针结束画笔开始填充没有直接创建一个对象方法开始画笔设置填充颜色是顺时针最近做的两个项目都是关于canvas的，做完整理一下，方便下一次使用，在vue里写的小demo，功能：画扇形动态画圆弧（requestAnima...

airborne007 2019-08-23 16:56 评论0 收藏0
H5--canvas实现粒子时钟

我们先看看粒子时钟的效果，如下：showImg(https://segmentfault.com/img/remote/1460000016290266);下面我们将通过canvas和js实现，首先要创建一个html文件并添加一个canvas画布，如下： Document .container{ margin: 0, aut...

avwu 2019-08-23 11:47 评论0 收藏0