老师请检查

来源:4-10 编程练习

蒜泥辣椒麻油加醋酱

2019-08-15 11:09:56

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <style>

        canvas{background-color:lightblue;}

    </style>

</head>

<body>

    <canvas id="canvas" width="800" height="800">

        您的浏览器不支持canvas

    </canvas>

    

    <script>

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

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

        ctx.translate(200,100);

        ctx.beginPath();

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

        ctx.fillStyle = "pink";

        ctx.fill();

        

        ctx.beginPath();

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

            ctx.rotate(Math.PI / 2);

            ctx.moveTo(40,0);

            ctx.lineTo(50,0);

        }

        ctx.moveTo(0,0);

        ctx.lineTo(10,-30);

        ctx.moveTo(0,0);

        ctx.lineTo(30,0);

        ctx.strokeStyle = "purple";

        ctx.stroke();

//在此处写出代码

</script>

</body>


</html>


写回答

1回答

好帮手慕星星

2019-08-15

同学你好,

表盘效果实现的没有问题。但是任务中要求:

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

圆心位置移动到canvas中心,表盘可以画的再大一些,例如:

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

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

祝学习愉快!

0

0 学习 · 4826 问题

查看课程

相似问题