黄色的stroke,没法消除，
来源：3-11 编程练习
慕侠309804
2019-02-23 21:57:23
下身写在天线后面就带有黄色的stroke，感觉线的stroke没法消除，请问怎么把黄色框弄掉；
<!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(100,100,104,70);
ctx.fillStyle = "#ffdab9";
ctx.fillRect(100,100,104, 70);
ctx.beginPath()
ctx.arc(126,126,5,0,Math.PI*2);
ctx.fillStyle ="#000000";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(178,126,5,0,Math.PI*2);
ctx.fillStyle ="#000000";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeRect(135,145,36,14);
ctx.fillStyle = "#ff0000";
ctx.fillRect(135,145,36,14);
ctx.strokeRect(84,114,16,30);
ctx.fillStyle = "#ffd700";
ctx.fillRect(84,114,16,30);
ctx.strokeRect(204,114,16,30);
ctx.fillStyle = "#ffd700";
ctx.fillRect(204,114,16,30);
// 放到这个地方可以
// ctx.beginPath();
// ctx.strokeRect(118,170,70,104);
// ctx.fillStyle = "#ffb6c1";
// ctx.fillRect(118,170,70,104);
// ctx.fillStyle = "#1eb2a9";
// ctx.strokeRect(14,204,104,16);
// ctx.fillRect(14,204,104,16);
// ctx.strokeRect(188,204,104,16);
// ctx.fillRect(188,204,104,16);
// ctx.strokeRect(128,275,16,104);
// ctx.fillRect(128,275,16,104);
// ctx.strokeRect(166,275,16,104);
// ctx.fillRect(166,275,16,104);
// 天线
ctx.beginPath();
ctx.moveTo(100,30);
ctx.lineTo(134,100);
ctx.lineWidth = 4;
ctx.strokeStyle = "#ffc124";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(204,30);
ctx.lineTo(170,100);
ctx.lineWidth = 4;
ctx.strokeStyle = "#ffc124";
ctx.stroke();
// 放到这个地方就有黄色的stroke，感觉线的stroke没法消除，请问放到这个地方，怎么黄色框弄掉；
// 身体及四肢
ctx.beginPath();
ctx.strokeRect(118,170,70,104);
ctx.fillStyle = "#ffb6c1";
ctx.fillRect(118,170,70,104);
ctx.fillStyle = "#1eb2a9";
ctx.strokeRect(14,204,104,16);
ctx.fillRect(14,204,104,16);
ctx.strokeRect(188,204,104,16);
ctx.fillRect(188,204,104,16);
ctx.strokeRect(128,275,16,104);
ctx.fillRect(128,275,16,104);
ctx.strokeRect(166,275,16,104);
ctx.fillRect(166,275,16,104);
</script>
</body>
</html>
1回答
-
见信
2019-02-24
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#canvas{
background-color:lightblue;
}
</style>
</head>
<body>
<canvas id="canvas" width="800px" height="800px">
您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');// 头部
// ctx.strokeRect(100,100,104,70);
ctx.fillStyle = "#ffdab9";
ctx.fillRect(100,100,104, 70);
ctx.beginPath()
ctx.arc(126,126,5,0,Math.PI*2);
ctx.fillStyle ="#000000";
ctx.fill();
// ctx.stroke();
ctx.beginPath();
ctx.arc(178,126,5,0,Math.PI*2);
ctx.fillStyle ="#000000";
ctx.fill();
// ctx.stroke();
ctx.beginPath();
// ctx.strokeRect(135,145,36,14);
ctx.fillStyle = "#ff0000";
ctx.fillRect(135,145,36,14);
// ctx.strokeRect(84,114,16,30);
ctx.fillStyle = "#ffd700";
ctx.fillRect(84,114,16,30);
// ctx.strokeRect(204,114,16,30);
ctx.fillStyle = "#ffd700";
ctx.fillRect(204,114,16,30);
// 放到这个地方可以
// ctx.beginPath();
// ctx.strokeRect(118,170,70,104);
// ctx.fillStyle = "#ffb6c1";
// ctx.fillRect(118,170,70,104);
// ctx.fillStyle = "#1eb2a9";
// ctx.strokeRect(14,204,104,16);
// ctx.fillRect(14,204,104,16);
// ctx.strokeRect(188,204,104,16);
// ctx.fillRect(188,204,104,16);
// ctx.strokeRect(128,275,16,104);
// ctx.fillRect(128,275,16,104);
// ctx.strokeRect(166,275,16,104);
// ctx.fillRect(166,275,16,104);
// 天线
ctx.beginPath();
ctx.moveTo(100,30);
ctx.lineTo(134,100);
ctx.lineWidth = 4;
ctx.strokeStyle = "#ffc124";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(204,30);
ctx.lineTo(170,100);
ctx.lineWidth = 4;
ctx.strokeStyle = "#ffc124";
ctx.stroke();
// 放到这个地方就有黄色的stroke，感觉线的stroke没法消除，请问放到这个地方，怎么黄色框弄掉；// 身体及四肢
ctx.beginPath();
ctx.fillStyle = "#ffb6c1";
ctx.fillRect(118,170,70,104);
ctx.fillStyle = "#1eb2a9";
ctx.fillRect(14,204,104,16);
ctx.fillRect(188,204,104,16);
ctx.fillRect(128,275,16,104);
ctx.fillRect(166,275,16,104);// 这是你的段代码，被我修改后，你得把所有的strokerect给清除掉就行了。
// strokerect方法是以描边的形式绘制一个长方形，这个长方形是有边框，但是中空的。
// fillrect是以填充的方式绘制一个长方形，这个长方形是中间实体，但是没有边框的。
// 还有一个问题，就是你没有理解stroke的用法和fill的用法，strokerect方法以stroke开头，内置了stroke方法的调用，所以你无需自行调用stroke方法它也会自动描边出来，
// fillrect方法也是一样，它也是自动填充了的，你不需要自己在调用一次填充，// 但是，比如arc（）方法，它没有以fill开头也没有以stroke开头，你就得自己选择是调用描边还是填充
// 你的问题是即在相同的绘制绘制了一个有边框的长方形，和一个有实体的长方形，所以你的边框无法消除，只要绘制有实体的就行了，有边框的删除掉。
// 我的注释里没分拼音与原生符号大小写之类的
头
ctx.fillStyle = "#ffdab9";
ctx.fillRect(300,200,150,100);
// 耳朵
ctx.fillStyle = "#ffd700";
ctx.fillRect(300,220,-20,40);
ctx.fillRect(450,220,20,40);
// 嘴
ctx.fillStyle = "#ff0000";
ctx.fillRect(350,265,50,20);
// 身体
ctx.fillStyle = "#ffb6c1";
ctx.fillRect(320,300,110,150);
// 手
ctx.fillStyle = "#20b2aa";
ctx.fillRect(320,350,-150,20);
ctx.fillRect(430,350,150,20);
// 腿
ctx.fillRect(330,450,20,150);
ctx.fillRect(420,450,-20,150);
// 眼睛
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(340,225,15,2*Math.PI,false);
ctx.fill();
ctx.beginPath();
ctx.arc(410,225,15,2*Math.PI,false);
ctx.fill();
// 天线
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = "#ffbf1a";
ctx.moveTo(300,50);
ctx.lineTo(350,200);
ctx.moveTo(450,50);
ctx.lineTo(400,200);
ctx.stroke();
// 上面这段代码是我自己写的你可以和你的对比，从而发现问题所在，望采纳，谢谢、
</script>
</body>
</html>0
相似问题