效果如何？？

来源：4-10 编程练习

qq_慕九州2374973

2020-02-27 13:47:45

<!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 context=canvas.getContext("2d");
      //在此处编写代码
      //画圆
      context.translate(300,300);
      context.fillStyle = "pink";
      context.arc(0,0,100,0,2*Math.PI,true);
      context.fill();
      //画刻度
      for(var i = 0;i < 4;i++){
        context.beginPath();
        context.moveTo(0,-100);
        context.lineTo(0,-90);
        context.rotate(Math.PI/2);
        context.stroke();
      }
      //画时间
      //分
      context.beginPath();
      context.strokeStyle = "blue";
      context.moveTo(0,0);
      context.lineTo(80,0);
      context.stroke();
     //时
      context.beginPath();
      context.rotate(2*Math.PI/12/4);
      context.moveTo(0,0);
      context.lineTo(0,-70);
      context.stroke();
    </script>
</body>
</html>