麻烦老师检查下

来源:3-8 编程练习

Yuri沫

2020-04-22 13:47:40

<!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.strokeRect(300,200,200,120);

     ctx.strokeRect(275,220,25,50);

     ctx.strokeRect(500,220,25,50);

     ctx.strokeRect(364,270,70,30);

     ctx.arc(350,240,12,0,2*Math.PI,false);

     ctx.stroke();

     ctx.beginPath();

     ctx.arc(450,240,12,0,2*Math.PI,false);

     ctx.stroke();


     ctx.beginPath();

     ctx.moveTo(300,100);

     ctx.lineTo(360,200);


     ctx.moveTo(500,100);

     ctx.lineTo(440,200);

     ctx.stroke();


     ctx.strokeRect(340,320,120,200);

     ctx.strokeRect(140,390,200,20);

     ctx.strokeRect(460,390,200,20);

     ctx.strokeRect(370,520,20,200);

     ctx.strokeRect(410,520,20,200);

</script>

</body>


</html>


另外请问下老师,有没有类似strokeRect的方法可以去画圆?

写回答

2回答

好帮手慕星星

2020-04-22

同学你好,是的,还需要使用stroke()描边。

祝学习愉快!

0

好帮手慕星星

2020-04-22

同学你好,代码绘制效果很棒。

另外,可以使用arc方法画圆,还需要配合stroke方法,参考

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

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

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

0
huri沫
h 就是没有像strokeRect这样封装好的方法去画圆是嘛?
h020-04-22
共1条回复

0 学习 · 4826 问题

查看课程