老师请检查
来源：3-11 编程练习
慕标5156652
2020-07-27 16:26:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
box-shadow: 0 0 3px;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800">
</div>
<script>
var ctx = canvas.getContext("2d");
// 天线
ctx.moveTo(100, 50);
ctx.lineTo(150, 150);
ctx.lineWidth = 5;
ctx.strokeStyle = "orange";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(200, 150);
ctx.lineWidth = 5;
ctx.strokeStyle = "orange";
ctx.stroke();
// tou
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.fillRect(100, 150, 150, 100);
ctx.fill();
ctx.stroke();
ctx.stroke();
// 左眼
ctx.beginPath();
ctx.arc(150, 175, 12.5, 0, 2 * Math.PI, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
// 右眼
ctx.beginPath();
ctx.arc(200, 175, 12.5, 0, 2 * Math.PI, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
//嘴
ctx.beginPath();
// ctx.strokeRect(150,215,50,20);
ctx.fillStyle = "red";
ctx.fillRect(150, 215, 50, 20);
ctx.fill();
ctx.stroke();
//左耳
ctx.beginPath();
// ctx.strokeRect(80,160,20,40);
ctx.fillStyle = "yellow";
ctx.fillRect(80, 160, 20, 40);
ctx.fill();
ctx.stroke();
//右耳
ctx.beginPath();
// ctx.strokeRect(80,160,20,40);
ctx.fillStyle = "yellow";
ctx.fillRect(250, 160, 20, 40);
ctx.fill();
ctx.stroke();
//身体
ctx.beginPath();
ctx.fillStyle = "pink";
ctx.fillRect(125, 250, 100, 150);
ctx.fill();
ctx.stroke();
//左手
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(25, 300, 100, 20);
ctx.fill();
ctx.stroke();
//右手
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(225, 300, 100, 20);
ctx.fill();
ctx.stroke();
//左脚
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(140, 400, 25, 100);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(185, 400, 25, 100);
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
老师我还有个问题 代码如下
//右耳
ctx.beginPath();
// ctx.strokeRect(80,160,20,40);
ctx.fillStyle = "yellow";
ctx.fillRect(250, 160, 20, 40);
ctx.fill();
ctx.stroke();
就是我们比如我们在写右耳的时候
没有设置矩形就直接fillrect 感觉这样写好像更加稳妥点 不然的话 我们先画矩形在写填充的范围 如果前面有设置填充的样式就会出现一点边框 这个是什么原因类似下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
box-shadow: 0 0 3px;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800">
</div>
<script>
var ctx = canvas.getContext("2d");
// 天线
ctx.moveTo(100, 50);
ctx.lineTo(150, 150);
ctx.lineWidth = 5;
ctx.strokeStyle = "orange";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(200, 150);
ctx.lineWidth = 5;
ctx.strokeStyle = "orange";
ctx.stroke();
// tou
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.fillRect(100, 150, 150, 100);
ctx.fill();
ctx.stroke();
ctx.stroke();
// 左眼
ctx.beginPath();
ctx.arc(150, 175, 12.5, 0, 2 * Math.PI, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
// 右眼
ctx.beginPath();
ctx.arc(200, 175, 12.5, 0, 2 * Math.PI, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
//嘴
ctx.beginPath();
// ctx.strokeRect(150,215,50,20);
ctx.fillStyle = "red";
ctx.fillRect(150, 215, 50, 20);
ctx.fill();
ctx.stroke();
//左耳
ctx.beginPath();
ctx.strokeRect(80,160,20,40);
ctx.fillStyle = "yellow";
ctx.fillRect(80, 160, 20, 40);
ctx.fill();
ctx.stroke();
//右耳
ctx.beginPath();
// ctx.strokeRect(80,160,20,40);
ctx.fillStyle = "yellow";
ctx.fillRect(250, 160, 20, 40);
ctx.fill();
ctx.stroke();
//身体
ctx.beginPath();
ctx.fillStyle = "pink";
ctx.fillRect(125, 250, 100, 150);
ctx.fill();
ctx.stroke();
//左手
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(25, 300, 100, 20);
ctx.fill();
ctx.stroke();
//右手
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(225, 300, 100, 20);
ctx.fill();
ctx.stroke();
//左脚
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(140, 400, 25, 100);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(185, 400, 25, 100);
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
左耳就会出现一点一点边框颜色 颜色就是之前设置的orange（还有就是我不知道这个orange是之前设置的那个orange是天线的还是头的orange？）希望老师给我解答
2回答
-
好帮手慕慕子
2020-07-27
同学你好，对于你的问题解答如下：
因为strokeRect和fillRect两种方式是有区别的，如下：
（1）fillRect(x, y, width, height)：绘制一个填充的矩形。
（2）strokeRect(x, y, width, height)：绘制一个矩形的边框。
所以先绘制一个矩形的边框，然后再填充，需要单独设置边框的颜色与填充的颜色一致。推荐同学直接使用fllRect方法实现效果。
使用的是给天线设置的orange。
因为天线使用的strokeStyle属性设置图形轮廓的颜色，而头部使用fiilStyle属性设置图形的填充颜色，左耳的矩形边框是需要使用strokeStyle属性来设置的，所以沿用的是给天线设置的颜色。
老师这里给同学提供一个小技巧，当分不清楚时，可以调整一下天线和头部的颜色，测试下左耳的边框是什么颜色，就可以很容易的分清楚沿用的是哪里的颜色，示例：
效果如下：左耳边框使用的是天线的颜色。
圆的边框无法去掉，只能通过调整填充颜色与边框一致，实现视觉上没有边框的效果。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
慕标5156652
提问者
2020-07-27
我百度了一下 开启新路径但是颜色不会 可以把边框去掉 那怎么去掉圆形的边框啊
我们画的圆包括两部分
圈外线条，2.圈内面积。
可以把圈外线条颜色设置成圈内面积的颜色这样就覆盖了ctx.strokeStyle=“black”
这样也没有去掉边框呀
老师怎么去掉边框呢？
0
