老师，为什么不用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回答