html5 canvas 画的简易时钟

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>时钟</title>
<script type="text/javascript">
//开始之前必须懂得时针各指针的弧度计算公式。
var canvas,context;
function window_onload(){
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    setInterval("draw()",1000);
}
function draw(){
    ///得到当前系统时间的：时、分、秒
      var now_date=new Date();
      var radius = Math.min(canvas.width/2,canvas.height/2),
           sec=now_date.getSeconds(),
           min=now_date.getMinutes(),
           hour=now_date.getHours();
           hour=hour>=12?hour-12:hour;

    //初始化画布
      context.save();
      context.clearRect(0,0,canvas.width,canvas.height);
      context.translate(canvas.width/2,canvas.height/2);
      context.scale(0.9,0.9);
      context.rotate(-Math.PI/2);
      context.save();

//小时刻度
      context.strokeStyle="black";
      context.fillStyle="black";
      context.lineWidth=3;
      context.lineCap="round";
      context.beginPath();
      for(var i=0;i<12;i++){
        context.rotate(Math.PI/6);
        context.moveTo(radius-30,0);
        context.lineTo(radius-10,0);
      }
      context.stroke();
      context.restore();
      context.save();

    //分钟刻度
      context.lineWidth=2;
      context.beginPath();
      for(var i=0;i<60;i++){
        if(i%5!=0){
          context.moveTo(radius-15,0);
          context.lineTo(radius-10,0);
        }
        context.rotate(Math.PI/30);
      }
      context.stroke();
      context.restore();
      context.save();

    //画上时针
      context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
      context.lineWidth=6;
      context.lineCap="butt";
      context.beginPath();
      context.moveTo(-10,0);
      context.lineTo(radius*0.5,0);
      context.stroke();
      context.restore();
      context.save();

    //分针
      context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
      context.strokeStyle="#29A8DE";
      context.lineWidth=4;
      context.lineCap="butt";
      context.beginPath();
      context.moveTo(-20,0);
      context.lineTo(radius*0.7,0);
      context.stroke();
      context.restore();
      context.save();

    //秒针
      context.rotate(sec*Math.PI/30);
      context.strokeStyle="red";
      context.lineWidth=2;
      context.lineCap="butt";
      context.beginPath();
      context.moveTo(-30,0);
      context.lineTo(radius*0.9,0);
      context.stroke();
      context.restore();
      context.save();

      ///表框
      context.lineWidth=4;
      context.strokeStyle="gray";
      context.beginPath();
      context.arc(0,0,radius,0,Math.PI*2,true);
      context.stroke();
    context.restore();
      context.restore();
}
</script>
</head>
<body onLoad="window_onload()">
    <canvas width="300" height="300" id="myCanvas"></canvas>
</body>
</html>

据博友要求，现补上效果图：

转载于:https://blog.51cto.com/chenjinfei/770655

html5 canvas 画的简易时钟相关推荐

html5绘制时钟刻度,html5 canvas 画的简易时钟
时钟 //开始之前必须懂得时针各指针的弧度计算公式. var canvas,context; function window_onload(){ canvas = document.getElemen ...
css画钟表_html5 canvas 画的简易时钟
时钟 //开始之前必须懂得时针各指针的弧度计算公式. var canvas,context; function window_onload(){ canvas = document.getElemen ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...

html5 canvas 画的简易时钟

html5 canvas 画的简易时钟相关推荐

最新文章

热门文章