您的位置：首页 > Web前端 > HTML5

兄弟连HTML5——07.canvas实例1——时钟

2016-12-11 15:38 176 查看

本章概要

   1.分析时钟的组成

   2.分析需要的canvas技术

   3.动手操作

   4.美化时钟



主要应用的技术

   1.canvas画线

   2.canvas画圆

   3.笔触修改和填充笔修改

   4.角度旋转

   5.js部分对象和方法（Date对象和setInterval）

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title></title>

</head>

<body>



   <canvas id="clock" width="500" height="500">

    您的浏览器不支持canvas标签，无法看到时钟

   </canvas>

<script type="text/javascript">

  var clock=document.getElementById("clock");

  var cxt=clock.getContext("2d");



  function drawClock(){

   //清除画布

   cxt.clearRect(0,0,500,500);

   var now=new Date();

   var sec=now.getSeconds();

   var min=now.getMinutes();

   var hour=now.getHours();

   //小时必须获取浮点类型

   hour=hour+min/60;

   //问题 19:23:30

   //将24小时进制转为12小时

   hour=hour>12?hour-12:hour;



   //表盘（蓝色）

   cxt.lineWidth=10;

   cxt.strokeStyle="blue";

   cxt.beginPath();

   cxt.arc(250,250,200,0,360,false);

   cxt.closePath();

   cxt.stroke();



   //刻度

   //时刻度

   for(var i=0;i<12;i++){

    cxt.save();

    //设置时针的粗细

    cxt.lineWidth=7;

    //设置时针的颜色

    cxt.strokeStyle="#000";

    //先设置0，0点

    cxt.translate(250,250);

    //再设置旋转角度

    cxt.rotate(i*30*Math.PI/180);

    cxt.beginPath();

    cxt.moveTo(0,-170);

    cxt.lineTo(0,-190);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

   }



   //分刻度

   for(var i=0;i<60;i++){

    cxt.save();

    //设置分刻度的粗细

    cxt.lineWidth=5;

    //设置颜色（使用时刻度的颜色）

    cxt.strokeStyle="#000";

    //设置或者重置画布的0,0点

    cxt.translate(250,250);

    //设置旋转角度

    cxt.rotate(i*6*Math.PI/180);

    //画分针刻度

    cxt.beginPath();

    cxt.moveTo(1,-180);

    cxt.lineTo(0,-190);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

   }



   //时针

   cxt.save();

   //设置时针风格

   cxt.lineWidth=7;

   //设置时针颜色

   cxt.strokeStyle="#000";

   //设置异次元空间的0,0点

   cxt.translate(250,250);

   //设置旋转角度

   cxt.rotate(hour*30*Math.PI/180);

   cxt.beginPath();

   cxt.moveTo(0,-140);

   cxt.lineTo(0,10);

   cxt.closePath();

   cxt.stroke();

   cxt.restore();



   //分针

   cxt.save();

   //设置分针的风格

   cxt.lineWidth=5;

   cxt.strokeStyle="#000";

   //设置异次元空间画布的圆心

   cxt.translate(250,250);

   //设置旋转角度

   cxt.rotate(min*6*Math.PI/180);

   cxt.beginPath();

   cxt.moveTo(0,-160);

   cxt.lineTo(0,15);

   cxt.closePath();

   cxt.stroke();

   cxt.restore();



   //秒针

   cxt.save();

   //设置秒针的风格

   cxt.lineWidth=3;

   cxt.strokeStyle="red";

   //设置异次元空间画布的圆心

   cxt.translate(250,250);

   //设置旋转角度

   cxt.rotate(sec*6*Math.PI/180);

   cxt.beginPath();

   cxt.moveTo(0,-170);

   cxt.lineTo(0,20);

   cxt.closePath();

   cxt.stroke();

   //画出时针、分针、秒针的交叉点

   cxt.beginPath();

   cxt.arc(0,0,5,0,360,false);

   cxt.closePath();

   //设置填充样式

   cxt.fillStyle="gray";

   cxt.fill();

   //设置笔触样式(秒针已设置)

   cxt.stroke();

   //设置秒针前段的小圆点

   cxt.beginPath();

   cxt.arc(0,-150,5,0,360,false);

   cxt.closePath();

   //设置填充样式

   cxt.fillStyle="gray";

   cxt.fill();

   //设置笔触样式(秒针已设置)

   cxt.stroke();

   cxt.restore();

  }

  //使用setInterval()，让时钟动起来

  drawClock();

  setInterval(drawClock,1000);

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航