请老师检查，其中右眼有点小疑惑，在代码中已经标注了
来源：3-11 编程练习
慕工程8318248
2020-05-21 17:59:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas(填充与描边)机器人</title>
<style>
canvas{background-color:lightblue;margin-left:200px;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800">
您的浏览器不支持canvas
</canvas>
<script>
var canvas=document.querySelector("#canvas");
var ren=canvas.getContext('2d');
// 天线
ren.save(); // 存储状态
ren.moveTo(120,50);
ren.lineTo(140,100);
ren.lineWidth="5";
ren.strokeStyle="orange";
ren.stroke();
ren.beginPath();
ren.moveTo(160,100);
ren.lineTo(180,50);
ren.stroke();
ren.restore(); // 清除样式
// 头部
// ren.strokeRect(100,100,100,50); // 脸颊
ren.fillStyle="rgb(255,218,185)";
ren.fillRect(100,100,100,50);
ren.fill();
// ren.strokeRect(140,130,20,10); // 嘴巴
ren.fillStyle="red";
ren.fillRect(140,130,20,10);
ren.fill();
// ren.strokeRect(90,110,10,20); // 左耳
ren.fillStyle="rgb(255,215,0)";
ren.fillRect(90,110,10,20);
ren.fill();
// ren.strokeRect(200,110,10,20); // 右耳
ren.fillStyle="rgb(255,215,0)";
ren.fillRect(200,110,10,20);
ren.fill();
// 眼睛
ren.beginPath(); // 左眼
ren.arc(125,120,6,0,Math.PI*2);
ren.stroke();
ren.fillStyle="#000";
ren.fill();
ren.beginPath(); // 右眼
ren.arc(175,120,6,0,Math.PI*2);
ren.stroke();
ren.fillStyle="#000";
ren.fill();
// 躯干
ren.beginPath(); // 不开始新的路径时，右眼填充颜色无法生效
// ren.strokeRect(120,150,60,80); // 身子
ren.fillStyle="rgb(255,182,193)";
ren.fillRect(120,150,60,80);
ren.fill();
// ren.strokeRect(40,175,80,12); // 左手
ren.fillStyle="rgb(32,178,170)";
ren.fillRect(40,175,80,12);
ren.fill();
// ren.strokeRect(180,175,80,12); // 右手
ren.fillStyle="rgb(32,178,170)";
ren.fillRect(180,175,80,12);
ren.fill();
// ren.strokeRect(130,230,10,70); // 左脚
ren.fillStyle="rgb(32,178,170)";
ren.fillRect(130,230,10,70);
ren.fill();
// ren.strokeRect(160,230,10,70); // 右脚
ren.fillStyle="rgb(32,178,170)";
ren.fillRect(160,230,10,70);
ren.fill();
</script>
</body>
</html>
1回答
-
同学你好，解答如下：
不重新开启路径的话，设置的填充颜色会被最后面的颜色覆盖。可以测试如下：
所以要重新开一个路径避免相互影响。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题