用canvas的arc绘制时钟

在页面上加入canvas标签：

<body>
<canvas id="c1"  width="600px" height="600px">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>

js部分：

绘制秒的刻度的思路是先用oGC.stroke()循环画60个6°的扇形，将它们拼接成一整个圆，然后用oGC.fill()画一个实心的圆，半径比之前拼接的那个圆短，用实心的圆挡住中间多余的线，这样秒的刻度就画出来了，以此类推可以画出分的刻度；

让时钟自动走起来：获取new Date()下的真实时、分、秒时间，然后用‘角度*Math.PI/180=弧度’的公式换算成弧度，赋值给时针、分针、秒针的圆中对应的弧度值，注意：弧度的变化是沿着顺时针的方向增加的，也就是在秒针指向0秒时，它的弧度是-90°。最后设置一个定时器，每隔1s调用一次封装的函数：

<script>
window.onload = function(){
    var oC = document.getElementById(‘c1‘);
    var oGC = oC.getContext(‘2d‘);  

    function toDraw(){
        var a = 200;
        var b = 200;
        var r = 100;

        oGC.clearRect(0,0,oC.width,oC.height);

        //获取时间
        var oDate = new Date();
        var oHour = oDate.getHours();
        var oMin = oDate.getMinutes();
        var oSec = oDate.getSeconds();

        var oHourvalue = (-90 + oHour*30 + oMin/2 )*Math.PI/180;
        var oMinvalue = (-90 + oMin*6 )*Math.PI/180;
        var oSecvalue = (-90 + oSec*6 )*Math.PI/180;

        //绘制秒的刻度
        oGC.beginPath();
        for(var i=0;i<60;i++){
            oGC.moveTo(a,b);
            oGC.arc(a,b,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = ‘white‘;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*19/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

        //绘制分的刻度
        oGC.lineWidth = 3;
        oGC.beginPath();
        for(var i=0;i<12;i++){
            oGC.moveTo(a,b);
            oGC.arc(a,b,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = ‘white‘;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*17/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

        //绘制时针
        oGC.lineWidth = 4;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*13/20,oHourvalue,oHourvalue,false);
        oGC.closePath();
        oGC.stroke();

        //绘制分针
        oGC.lineWidth = 2;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*18/20,oMinvalue,oMinvalue,false);
        oGC.closePath();
        oGC.stroke();

        //绘制秒针
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*19/20,oSecvalue,oSecvalue,false);
        oGC.closePath();
        oGC.stroke();
    }；
    setInterval(toDraw,1000);
};
</script>
时间： 2024-07-31 02:46:17

用canvas的arc绘制时钟的相关文章

使用canvas绘制时钟并通过class面向对象

使用canvas绘制时钟并通过class面向对象 1.思路分析 钟表可分为静止的刻度和动态的指针两大部分由于指针具有动态性,必然需要定时器实时刷新清空并重绘但刻度部分如果一起清空并重绘会降低性能因此可以使用两个重叠在一起的canvas画板来分别绘制两个部分 2.绘制表盘步骤 2.1.首先获取第一个面板的上下文: var canvas1=document.getElementById("canvas1"); var ctx1=canvas1.getContext("2d&quo

小任务之Canvas绘制时钟

背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/12 那么rad=i*2*Math.PI/12 x=Math.cos(rad)*所需要的长度(也就是半径-差值) y=Math.sin(rad)*所需要的长度(也就是半径-差值) 同理可得60个点的绘制 60个数字分得弧度每个rad=i*2*Math.PI/60 x=Math.cos(rad)*所需

绘制时钟

  <!doctype html>   <html lang="en">   <head>   <meta charset="UTF-8">   <title>Canvas绘制时钟Demo</title>   <style>   #myCanvas{   border: 1px solid;   }   </style>   </head>   <bod

js绘制时钟

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制时钟Demo</title> <style> #myCanvas{ border: 1px solid; } </style> </head> <body> <canvas id=&quo

千呼万唤 HTML 5 (8) - 画布（canvas）之绘制图形

[索引页][源码下载] 作者:webabcd 介绍HTML 5: 画布(canvas)之绘制图形 画布 Demo - 画布的基本概念及 Demo,canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL() 在画布上绘制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, str

Html5绘制时钟

最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: 1 <script type="text/javascript"> 2 3 //绘制圆形的弧度,ctx 为绘制环境,x,y为绘制中心,r为绘制半径,st为起始弧度,end为结束弧度 4 function circle(ctx, x, y, r, st, end, w) { 5 ctx.lineWidth = w; 6 ctx.begi

自定义组件-绘制时钟

1.效果图 2.Canvas对象详解 1.translate(x,y):平移,将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0). 例子:画布原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴.y轴移动10,则原点变为(11,11). 2.scale(x,y):扩大.x为水平方向的放大倍数,y为竖直方向的放大倍数. 3.rotate(angel):旋转.angle指旋转的角度,顺时针旋转. 4.transform

HTML5中canvas元素，绘制圆形

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. <!DOCTYPE html> <head> <meta charset="UTF-8" /> <script>     function draw(id) {         var canvas = document.getElementById(id);         if (canvas == nu

canvas教程(三) 绘制曲线

经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 context.beginPath(); context.arc(x, y, r, startRadian, endRadian, antclockwise); context.closePath(); 我们是第一次用到 beginPath 和 closePath 这两个方法,首先这两个方法故名思意就是开始路径