英文:
Different Colors with FillStyle() and RoundRect()
问题
我想要两个填充的圆角矩形，每个矩形有不同的颜色，但它每次都给我最后一个颜色。
这是我的代码：
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = "#00a6a4";
ctx.roundRect(10, 10, 100, 100, 10);
ctx.fill();
ctx.fillStyle = "#2e2e2e";
ctx.roundRect(110, 110, 100, 100, 10);
ctx.fill();
这是它给我的结果：
英文:
So i wanted to have two filled rounded rectangle with a different color for each one but it give me the last color everytime
This is my code :
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// #2e2e2e
// #00a6a4
ctx.fillStyle = "#00a6a4";
ctx.roundRect(10, 10, 100, 100,10);
ctx.fill();
ctx.fillStyle = "#2e2e2e";
ctx.roundRect(110, 110, 100, 100,10);
ctx.fill();
This is what it give me :
答案1
得分: 0
在第一次填充后调用ctx.beginPath()。
第一次填充时，您正在填充一个矩形。但是在第二次填充时，您填充了两个矩形，因为您从未开始新的路径，所以您只是在第一个矩形上进行填充。
英文:
call ctx.beginPath() after the first fill.
On the first fill you are filling one rect. But then on the second fill, you are filling both rectangles because you never start a new path, so you are just filling over that first rect.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论