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

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

  • Go 旅城通票 2016-05-23 09:54
    关注
             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();
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 Matlab问题解答有两个问题
  • ¥50 Oracle Kubernetes服务器集群主节点无法访问,工作节点可以访问
  • ¥15 LCD12864中文显示
  • ¥15 在使用CH341SER.EXE时不小心把所有驱动文件删除了怎么解决
  • ¥15 gsoap生成onvif框架
  • ¥15 有关sql server business intellige安装,包括SSDT、SSMS。
  • ¥15 stm32的can接口不能收发数据
  • ¥15 目标检测算法移植到arm开发板
  • ¥15 利用JD51设计温度报警系统
  • ¥15 快手联盟怎么快速的跑出建立模型