老师可以没有strok的线，直接填充吗，只有将线是设置为0.1宽，但是图片放大还是会有一点点影响
来源：3-11 编程练习
慕斯_Irice368
2019-08-18 12:40:52
<!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.moveTo(300, 50);//头部
ctx.lineTo(370, 180);
ctx.lineWidth = 5;
ctx.strokeStyle = "#EAD33C";
ctx.stroke();
ctx.beginPath(); //天线
ctx.moveTo(500, 50);
ctx.lineTo(430, 180);
ctx.stroke();
ctx.lineWidth = 0.1;
ctx.strokeStyle = "#F9D8BB";
ctx.strokeRect(300, 180, 200, 130);//头部形状
ctx.fillStyle = "#F9D8BB";
ctx.fillRect(300, 180, 200, 130)
ctx.strokeStyle = "#E5F904";
ctx.strokeRect(275, 205, 25, 50);//耳朵
ctx.fillStyle = "#E5F904";
ctx.fillRect(275, 205, 25, 50);
ctx.strokeRect(500, 205, 25, 50);//耳朵
ctx.fillRect(500, 205, 25, 50);
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(356, 230, 14, 0, 2 * Math.PI, true);//眼睛
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(444, 230, 14, 0, 2 * Math.PI, true);//眼睛
ctx.fill();
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
ctx.strokeRect(365, 260, 70, 25);//嘴巴
ctx.fillRect(365, 260, 70, 25);
ctx.strokeStyle = "pink";
ctx.fillStyle = "pink";
ctx.strokeRect(335, 310, 130, 220);//躯干
ctx.fillRect(335, 310, 130, 220);
ctx.strokeStyle = "#03BF96";
ctx.fillStyle = "#03BF96";
ctx.strokeRect(80, 365, 255, 25);//右手
ctx.fillRect(80, 365, 255, 25);
ctx.strokeRect(465, 365, 255, 25);//左手
ctx.fillRect(465, 365, 255, 25);
ctx.strokeRect(350, 530, 25, 200);//右腿
ctx.fillRect(350, 530, 25, 200);
ctx.strokeRect(425, 530, 25, 200);//左腿
ctx.fillRect(425, 530, 25, 200);
</script>
</body>
</html>
老师（看耳朵明显些）耳朵虽然效果出来了，但是感觉只要有线还是会占到下面的线的一半，
1回答
-
好帮手慕码
2019-08-18
同学你好！
不建议直接填充哦。像同学现在这样设置是可以的，如果觉得方法之后天线和头部之后有空隙，可以调整lineTo的值：
效果：
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题