首页手记【CANVAS实现时钟】js，html5

【CANVAS实现时钟】js，html5

标签：

Html5

看了慕课网的时钟教程跟着写了一个，发现实践才是硬道理。虽然之前没有看HTML5点内容，但是跟着做一遍查阅API手册，也有了入门的认识。
表示写代码就是一个磨炼心性的运动。毕竟一个括号，分号，大小写都可能是你抓破头看穿眼都找不出的bug。
前两天，复制了别人的代码运行ok再自己写的时候发现明明是一样的为啥我的没效果？看了半天的半天的半天发现明明是getFullYear(),我写的getFullyear()。所以看过的即使简单也一定要亲自实践一遍，不然你永远不知道问题会出在哪。虽然今天写的很晚但是至少完成了一个效果的制作，差点又拖到明天去了。。洗洗睡了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas时钟</title>
</head>
<body>
    <div>
        <canvas id="clock" width="600" height="600" style="border:1px dotted #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
    </div>
</body>
<script>
var dom=document.getElementById("clock");
var ctx=dom.getContext('2d');//所有画画的基础
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
var rem=width/200;
function drawpanel(){
    ctx.save();
    //要先开始一条路线,然后画一个圆圈
    ctx.translate(r,r);//translate（）重新定义原点,默认原点是左上角
    ctx.beginPath();
    ctx.lineWidth=10*rem;//线条样式
    ctx.arc(0,0,r-5*rem,0,2*Math.PI,false)
    //如何画？fill,stroke
    ctx.stroke();
    ctx.font="18"*rem+"px Arial";//在你填字之前加哦,中间是空格不是逗号.记得所有的动作前都要加ctx.
    //文本是fillText(text,x,y),属性有font,textAlign,textBaseline，接下来画入小时数.
    ctx.textAlign="center";
    ctx.textBaseline="middle";
    var time=[3,4,5,6,7,8,9,10,11,12,1,2];
/*  
    //3是0，4是30度，5是60度。。。索引是0，1，2...x=r*cos(rad),y=r*sin(rad).3为0度，
    var i=0;//写出3
    var rad=i*Math.PI/6;
    var x=(r-30)*(Math.cos(rad));
    var y= (r-30)*(Math.sin(rad));
    ctx.fillText(3,x,y);

    var i=1;//写出4
    var rad=i*Math.PI/6;
    var x=(r-30)*(Math.cos(rad));
    var y= (r-30)*(Math.sin(rad));
    ctx.fillText(4,x,y);

*/
    for(var i=0;i<time.length;i++){
        var rad=i*Math.PI/6;
        var x=(r-30*rem)*(Math.cos(rad));
        var y= (r-30*rem)*(Math.sin(rad));
        var num=time[i];
        ctx.fillText(num,x,y);
    }//浓缩的就是精华,这是小时 .如何画分刻度？360度分成60份，每6度画一个圆
    for(var i=0;i<60;i++){
        var rad=i*Math.PI/30;
        var x=(r-18*rem)*(Math.cos(rad));
        var y= (r-18*rem)*(Math.sin(rad));
        ctx.beginPath();//画圆四部曲：开始，选笔颜色啥的，画神马，拿笔
        if(i%5 ===0){
            ctx.fillStyle="#000";
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }else{
            ctx.fillStyle="#CCC";
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }
        ctx.fill();
    }
}
//下面是时分秒针的画法，画线用moveTo()起点,lineTo()终点，属性lineCap,lineWidth，rotate()旋转
function drawhour(h,m){
    ctx.save();//只要rotate了画布就会对后面的旋转角度进行叠加，所以可以在每次rotate前面后面进行保存与复原
    var rad=2*Math.PI/12*h;
    var mrad=2*Math.PI/12*m/60;
    ctx.rotate(rad+mrad);//放在后面没有用，要在画图开始前
    ctx.beginPath();
    ctx.lineWidth=6*rem;//不要单位
    ctx.lineCap="round";//round,square
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0,-r/2);
    ctx.stroke();//stroke才可以，不能fill
    ctx.restore();
}
function drawmin(m){
    ctx.save();
    var rad=2*Math.PI/60*m;
    ctx.rotate(rad);
    ctx.beginPath();
    ctx.lineWidth=4*rem;
    ctx.lineCap="round";
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0,-r+40*rem);
    ctx.stroke();
    ctx.restore();
}
function drawsec(s){
    ctx.save();
    var rad=2*Math.PI/60*s;
    ctx.rotate(rad);
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.moveTo(-3*rem,20*rem);
    ctx.lineTo(2*rem,20*rem);
    ctx.lineTo(1*rem,-r+18*rem);
    ctx.lineTo(-1*rem,-r+18*rem);
    ctx.fill();
    ctx.restore();
}
function drawdot(){//没带括号找了半天！！！
    ctx.beginPath();
    ctx.arc(0,0,4*rem,0,2*Math.PI);
    ctx.fill();
}
function drawclock(){
    ctx.clearRect(0,0,width,height);
    var now=new Date()
    var h=now.getHours();
    var m=now.getMinutes();
    var s=now.getSeconds();
    drawpanel();//下面几个点顺序也很重要，要先执行面板的函数，再画其他的。因为上面写的函数画指针是基于原来的面板定位，而面板在一开始是重新定义了原点。
    drawhour(h,m);
    drawmin(m);
    drawsec(s);
    drawdot();
    ctx.restore();
}
drawclock();
setInterval("drawclock();",1000);
</script>
</html>

点击查看更多内容