老师,为什么不用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回答
同学你好, 因为beginPath的作用是开启一条新的路径, 所以不使用的话, 会接着上一个路径继续画线,导致两个圆之间有一条线
最后,老师测试同学的代码效果实现的很棒哦,继续加油
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~~~