为什么刻度不显示

来源:4-10 编程练习

Aries典

2018-10-29 17:02:36


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>案例</title>

    <style>

        canvas{background-color:lightblue;}

    </style>

</head>

<body>

    <canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas>

    <script>

        var canvas=document.getElementById("canvas");

        var ctx=canvas.getContext("2d");

      //在此处编写代码

      //设置圆形

      ctx.save()

      ctx.arc(300,300,150,0,2*Math.PI,true);

      ctx.fillStyle='pink';

      ctx.fill();

      ctx.restore();

      ctx.beginPath();

      //设置刻度

      ctx.save()

      for(i=0;i<4;i++){


      ctx.rotate(Math.PI/4);

      ctx.moveTo(300,150);

      ctx.lineTo(300,180);


      }

      ctx.stroke();

      ctx.restore();

      ctx.beginPath();


      //设置时分针

      ctx.strokeStyle='blue';

      ctx.moveTo(300,300);

      ctx.lineTo(300,200);

      ctx.stroke();

      ctx.beginPath();


      ctx.moveTo(300,300);

      ctx.lineTo(400,300);

      ctx.stroke();

      ctx.beginPath();

    </script>

</body>

</html>


写回答

1回答

好帮手慕星星

2018-10-29

参考:

http://img.mukewang.com/climg/5bd6dbf10001416407670636.jpg

自己可以测试一下,祝学习愉快!

0

0 学习 · 4826 问题

查看课程