老师,为什么不用beginPath的话,两个圆之间会有一条线

来源:3-8 编程练习

ukina

2019-09-20 12:12:55

<!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,250,150);
     //嘴巴
     ctx.strokeRect(390,300,80,30);
     //耳朵
     ctx.strokeRect(270,250,30,50);
     ctx.strokeRect(550,250,30,50);
     //身体
     ctx.strokeRect(350,350,150,200);
     //四肢
     ctx.strokeRect(380,550,30,200);
     ctx.strokeRect(440,550,30,200);
     ctx.strokeRect(150,420,200,30);
     ctx.strokeRect(500,420,200,30);
     //眼睛
     ctx.arc(370,250,15,0,2*Math.PI,true);
     ctx.stroke();
     ctx.beginPath();
     ctx.arc(480,250,15,0,2*Math.PI,true);
     ctx.stroke();
     ctx.beginPath();
     //天线
     ctx.moveTo(370,200);
     ctx.lineTo(300,50);
     ctx.moveTo(480,200);
     ctx.lineTo(550,50);
     ctx.stroke();
	</script>
</body>

</html>


写回答

1回答

好帮手慕慕子

2019-09-20

同学你好, 因为beginPath的作用是开启一条新的路径, 所以不使用的话, 会接着上一个路径继续画线,导致两个圆之间有一条线

最后,老师测试同学的代码效果实现的很棒哦,继续加油

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~~

0

0 学习 · 4826 问题

查看课程