sinat_34890672
sinat_34890672
2016-05-23 09:27
采纳率: 68.4%
浏览 1.2k
已采纳

关于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条回答 默认 最新

  • showbo
    已采纳
             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();
    
    点赞 评论
  • caozhy

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

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

    点赞 评论
  • CSDNXIAOS
    Robot-S 2016-05-23 09:32

    用HTML5 Canvas画的时钟

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

    点赞 评论
  • motherland_hope
    斯密德 2016-05-23 09:42

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

    点赞 评论

相关推荐