ctx.strokeStyle工作，但没有错误消息的ctx.fillStyle。
ctx.strokeStyle工作，但没有错误消息的ctx.fillStyle。
提问于 2022-09-27 11:22:35
这是我制作越南国旗的密码。出于某种原因，只有strokeStyle才能工作，而不是fillStyle。我不知道为什么。我试着去掉红色，只显示画布上的黄色，但这只会使整个画布变黄。
<!DOCTYPE html>
<html lang="no-NB">
<head>
<title>Canvas Vietnam Flagg</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge" />
<style>
* {
box-sizing: border-box;
}
body {
background-color: #333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
margin: 0;
}
#canvas {
background: #f0f0f0;
border-radius: 0px;
}
</style>
</head>
<body>
<h1>Vietnam flagg</h1>
<canvas id="canvas" width="640"
height="426"></canvas>
<script>
const canvas =document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// bakgrunn
ctx.fillStyle = "rgb(218, 37, 29)";
ctx.fillRect(0,0,640, 426);
// stjerne
ctx.beginPath();
// 2-3
ctx.moveTo(320, 86);
ctx.lineTo(278, 170);
// 3-4
ctx.moveTo(278, 170);
ctx.lineTo(194, 170);
// 4-5
ctx.moveTo(194, 170);
ctx.lineTo(257, 233);
// 5-6
ctx.moveTo(257, 233);
ctx.lineTo(236, 317);
// 6-7
ctx.moveTo(236, 317);
ctx.lineTo(320, 275);
// 7-8
ctx.moveTo(320, 275);
ctx.lineTo(404, 317);
// 8-9
ctx.moveTo(404, 317);
ctx.lineTo(383, 233);
// 9-10
ctx.moveTo(383, 233);
ctx.lineTo(446, 170);
// 10-11
ctx.moveTo(446, 170);
ctx.lineTo(362, 170);
// 11-2
ctx.moveTo(362, 170);
ctx.lineTo(320, 86);
ctx.strokeStyle = "rgb(255, 255, 0)";
ctx.fillRect(0, 0, ctx.beginPath, ctx.closePath);
ctx.fillStyle ="rgb(255, 255, 0)";
ctx.fillRect(0, 0, ctx.beginPath, ctx.closePath);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>我试图改变strokeStyle和fillStyle的顺序，但是没有什么改变。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-27 11:38:29
您正在进行无用的移动操作，在使用ctx.fill方法而不是ctx.fillRect之前，您必须继续从初始点开始绘制，直到再次到达为止：
<!DOCTYPE html>
<html lang="no-NB">
<head>
<title>Canvas Vietnam Flagg</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge" />
<style>
* {
box-sizing: border-box;
}
body {
background-color: #333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
margin: 0;
}
#canvas {
background: #f0f0f0;
border-radius: 0px;
}
</style>
</head>
<body>
<h1>Vietnam flagg</h1>
<canvas id="canvas" width="640"
height="426"></canvas>
<script>
const canvas =document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// bakgrunn
ctx.fillStyle = "rgb(218, 37, 29)";
ctx.fillRect(0,0,640, 426);
// stjerne
ctx.beginPath();
// 2-3
ctx.moveTo(320, 86);
ctx.lineTo(278, 170);
// 3-4
ctx.lineTo(194, 170);
// 4-5
ctx.lineTo(257, 233);
// 5-6
ctx.lineTo(236, 317);
// 6-7
ctx.lineTo(320, 275);
// 7-8
ctx.lineTo(404, 317);
// 8-9
ctx.lineTo(383, 233);
// 9-10
ctx.lineTo(446, 170);
// 10-11
ctx.lineTo(362, 170);
// 11-2
ctx.lineTo(320, 86);
ctx.strokeStyle = "rgb(255, 255, 0)";
ctx.fillStyle ="rgb(255, 255, 0)";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
祝你好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73866758
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号