canvas实现钟表

2017-5-11 liuweibo JavaScript

这个钟重点不在怎么画，在三角函数，三角函数的使用与角度息息相关，Math.PI是π，Math.sin(),Math.cos()它们都是接受弧度的，所以要

把角度转换成弧度，在画钟前要先判断时钟的条件，把圆分成60份，每一份代表一个刻度，还有在圆的坐标是数学里的正方向为准的，所以

需要把开始坐标调一下，减个90度就可以和时钟的开始位置一样了。

在学canvas前一定要把以前遗忘的数学函数复习复习一下，不是一些复杂的算数就无法做了，canvas的学习就是坐标的不断确认的，然后连成线

最后画成图，这与数学里的点到线，线到面一样的道理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background: #eee;
        }
        canvas{
            background: #fff;
        }
    </style>
</head>
<body>
    <canvas width="800" height="800">你浏览器不支持，请升级...</canvas>
    <script>
        var oCas=document.getElementsByTagName("canvas")[0];
        var cas=oCas.getContext("2d");
        /*渐变颜色*/
        var color=cas.createRadialGradient(400,400,10,400,400,200);
            color.addColorStop(0,"#f1f4f5");
            color.addColorStop(1,"#c5c6c7");
        setInterval(function(){
        
        cas.clearRect(0,0,800,800);
        /*画圆框*/
        cas.lineWidth=3;
        cas.shadowColor="#888";
        cas.shadowOffsetX=1;
        cas.shadowOddsetY=1;
        cas.shadowBlur=5;
        cas.arc(400,400,200,0,Math.PI*2,false);
        cas.strokeStyle=color;
        cas.stroke(); 
        
        /*画圆内*/
        cas.fillStyle=color;     
        cas.fill();

        /*画时刻*/
        drawTime();
        function drawTime(){
            var len=8;
            var len1=16;
            cas.strokeStyle="#7f7f7f";
            cas.shadowOffsetX=0;
            cas.shadowOddsetY=0;
            cas.shadowBlur=0;
            cas.beginPath();
            for(var i=0;i<60;i++){
                if(i%5==0){
                cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);
                cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180));
                }else{
                cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);
                cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180));
                }
            }
            cas.stroke();    
        }

        /*画时针*/
        
        var date=new Date();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();
            /*时针*/
        needle(h*5+5*m/60,100,"#579ec5");
        /*分针*/
        needle(m,130,"#5e717c");
        /*秒针*/
        needle(s,150,"#1d1e1e");
        
        /*圆的中心点*/
        cas.fillStyle="#858384";
        cas.beginPath();
        cas.arc(400,400,5,0,2*Math.PI,true);
        cas.shadowOffsetX=1;
        cas.shadowOddsetY=1;
        cas.shadowBlur=5;
        cas.fill();
        },1000);

        /*时针的函数*/
        function needle(t,len,color){
            var angle=Math.PI/180;
            cas.beginPath();
            cas.strokeStyle=color;
            cas.moveTo(400,400);
            cas.lineTo(400+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle));
            cas.stroke();
        }

    </script>
</body>
</html>

分享到： QQ空间新浪微博腾讯微博微信更多

« 使用context上下文时如何防止内存泄漏 | linux--ubuntu搭建ftp»

canvas实现钟表

日历

存档

最新评论

链接

搜索