请老师检查，谢谢

来源：4-10 编程练习

qq_慕移动3101913

2020-02-28 16:40:43

<!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.translate(300,300);    //把圆心平移到页面中心
        ctx.arc(0,0,150,0,Math.PI*2,true);      //画圆形
        // ctx.stroke();            //把圆绘制出来
        ctx.fillStyle = 'pink';     //设置填充颜色
        ctx.fill();                 //把圆进行填充

        ctx.beginPath();        //清除之前的路径，重新开始新的路径
        for(var i=0;i<5;i++){   //绘制刻度，画出一个，其余进行旋转，并且循环出4个 
            ctx.rotate(Math.PI/2);
            ctx.moveTo(130,0);
            ctx.lineTo(150,0);
        }
        ctx.stroke();

        //长时针
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(0,-110);
        ctx.strokeStyle = 'purple';
        ctx.stroke();

        //短时针
        ctx.beginPath();
        ctx.rotate(Math.PI/1.8);
        ctx.moveTo(0,0);
        ctx.lineTo(0,90);
        ctx.strokeStyle = 'red';
        ctx.stroke();
      
    </script>
</body>
</html>

写回答

1回答