继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【CANVAS实现时钟】js,html5

qq_喵呜我姓易_04380998
关注TA
已关注
手记 2
粉丝 4
获赞 15

看了慕课网的时钟教程跟着写了一个,发现实践才是硬道理。虽然之前没有看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>
打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP

热门评论

可以看看我的那篇手记,duang,dog时钟。 新年快乐。

查看全部评论