关于html5canvas的画时钟问题

图片说明

 <script type="text/javascript">
var canvas,context;
function window_onload(){
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    setInterval("draw()",1000);
}
</script>

</head>


<body onLoad="window_onload()">
    <canvas width="800" height="800" id="myCanvas"></canvas>
</body>
</canvas>

<script>
function draw(){

    var radius=250;
    var now=new Date();
    var sec=now.getSeconds();
    var mins=now.getMinutes();
    var hour=now.getHours();

    ctx.save();
    ctx.clearRect(0,0,800,800);    
    ctx.translate(400,400);        

    ctx.rotate(-Math.PI/2);
    ctx.stroke();
    ctx.save();
    /*画圆盘*/

    ctx.lineWidth="7";
    ctx.beginPath();
    ctx.arc(0,0,250,2*Math.PI,false);
    ctx.stroke();
    ctx.restore();
    /*画小时刻度*/
    ctx.save();
    ctx.strokeStyle="blue";
    ctx.lineWidth="3";
    ctx.beginPath();
    for(x=0;x<12;x++){
        ctx.rotate(30*Math.PI/180);
        ctx.moveTo(240,0);
        ctx.lineTo(200,0);  
    }
    ctx.stroke();
    ctx.restore();

    /*画分钟刻度*/
    ctx.save();
    ctx.strokeStyle="red";
    ctx.beginPath();
    for(x=0;x<60;x++){
        if(x%5!=0){

        ctx.moveTo(240,0);
        ctx.lineTo(220,0);

    }
    ctx.rotate(6*Math.PI/180);
    }
    ctx.stroke();
    ctx.restore();

    /*画秒针*/
    ctx.save();
    ctx.rotate(sec*6*Math.PI/180);
    ctx.strokeStyle="red";

    ctx.beginPath();
    ctx.moveTo(190,0);
    ctx.lineTo(0,0);
    ctx.stroke();
    ctx.restore();

    ctx.save();

    ctx.restore();
    ctx.restore();
}
</script>

以上为代码,为啥钟上会有两个秒针?

4个回答

         function draw() {

            var radius = 250;
            var now = new Date();
            var sec = now.getSeconds();
            var mins = now.getMinutes();
            var hour = now.getHours();

            ctx.save();
            ctx.clearRect(0, 0, 800, 800);
            ctx.translate(400, 400);

            ctx.rotate(-Math.PI / 2);
           // ctx.stroke();////这里多了个stroke,所以多绘制了一条线
            ctx.save();
showbo
支付宝加好友偷能量挖 回复sinat_34890672: restore只是还原状态,路径还是会存在的,所以第一次执行draw只有一条,后续的才会出现2条
接近 4 年之前 回复
sinat_34890672
sinat_34890672 能不能告诉我,为什么我restore了,路径还能存在?
接近 4 年之前 回复
sinat_34890672
sinat_34890672 卧槽,好细心的码农,分给你了!谢谢!
接近 4 年之前 回复

是不是还有一个时针,或者你没有擦除?

参考:http://chenjinfei.blog.51cto.com/2965201/770655/

用HTML5 Canvas画的时钟

效果图
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas钟表_by http://www.sitejs......
答案就在这里:用HTML5 Canvas画的时钟
----------------------Hi,地球人,我是问答机器人小S,上面的内容就是我狂拽酷炫叼炸天的答案,除了赞同,你还有别的选择吗?

你的代码不全,
没法分析,请提高全面的代码,

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问