老师 请检查 问题在注释中
来源：3-11 编程练习
小鲜花
2019-12-25 10:53:00
<!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(150,50);
ctx.lineTo(190,130);
ctx.strokeStyle='yellow';
ctx.lineWidth='5';
ctx.stroke();//天线1
ctx.beginPath();
ctx.moveTo(330,50);
ctx.lineTo(290,130);
ctx.strokeStyle='yellow';
ctx.lineWidth='5';
ctx.stroke();//天线2
ctx.beginPath();
ctx.strokeRect(130,160,20,35);
ctx.strokeStyle='yellow';
ctx.fillStyle='yellow';
ctx.fillRect(130,160,20,35);
ctx.lineWidth='5';
ctx.stroke();//左耳
ctx.beginPath();
ctx.strokeRect(350,160,20,35);
ctx.fillStyle='yellow';
ctx.fillRect(350,160,20,35);
ctx.stroke();//右耳
ctx.beginPath();
ctx.strokeRect(150,130,200,100);
ctx.fillStyle='pink';
ctx.fillRect(150,130,200,100);
ctx.stroke();//头
ctx.beginPath();
ctx.arc(190,170,10,0,2*Math.PI,true);
ctx.fillStyle='#000';
ctx.fill();
ctx.stroke();//左眼
ctx.beginPath();
ctx.arc(310,170,10,0,2*Math.PI,true);
ctx.fillStyle='#000';
ctx.fill();
ctx.stroke();//右眼
ctx.beginPath();
ctx.strokeRect(225,190,50,20);
ctx.strokeStyle='red';//老师这里线条为什么旁边的变了 本身怎么不变
ctx.fillStyle='red';
ctx.fillRect(225,190,50,20);
ctx.stroke();//嘴
ctx.beginPath();
ctx.strokeRect(195,230,120,160);
ctx.strokeStyle='pink';//老师这里线条为什么旁边的变了 本身怎么不变
ctx.fillStyle='pink';
ctx.fillRect(195,230,120,160);
ctx.stroke();//身体
ctx.beginPath();
ctx.strokeRect(30,280,165,20);
ctx.fillStyle='green';
ctx.fillRect(30,280,165,20);
ctx.stroke();//左胳膊
ctx.beginPath();
ctx.strokeRect(315,280,165,20);
ctx.fillStyle='green';
ctx.fillRect(315,280,165,20);
ctx.stroke();//右胳膊
ctx.beginPath();
ctx.strokeRect(210,390,20,200);
ctx.fillStyle='green';
ctx.fillRect(210,390,20,200);
ctx.stroke();//左腿
ctx.beginPath();
ctx.strokeRect(285,390,20,200);
ctx.fillStyle='green';
ctx.fillRect(285,390,20,200);
ctx.stroke();//右腿
</script>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-12-25
同学你好，这个是顺序问题，应该先规定颜色，再画线。否则图形绘制的时候，使用的就是上一个路径中规定的。如下调整即可：
另外，头和身体都使用粉色效果不太好，建议把头部的填充颜色改为#fedcbd效果更好。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题