Javascript 为什么这些x，y坐标在fillRect中工作

在对javascript感兴趣之后，我决定快速地将javascript解决方案组合在一起，而不是尝试使用它。挑战在于制作冰岛国旗，比例在问题中确定

该标志必须是25:18的比例，所以我创建了一个250x180px大小的标志。然后，白色水平条纹应在距顶部7个单位处开始。（1个单位=10px）所以我假设这意味着从顶部开始是70px。然而，在创建代码时，我不得不更改x，y坐标，因为它看起来不正确

代码如下，有人能解释为什么我必须使用55px和65px而不是70px和80px（分别用于白色和红色条纹）吗？我必须直截了当，但我很困惑

<canvas id="i"></canvas>
<script>
    var c=document.getElementById("i").getContext("2d");
    c.fillStyle="#0048e0";
    c.fillRect(0,0,250,180);
    c.fillStyle="white";
    c.fillRect(0,55,250,40);
    c.fillRect(55,0,40,180);
    c.fillStyle="#d72828";
    c.fillRect(0,65,250,20);
    c.fillRect(65,0,20,180);
</script>

var c=document.getElementById（“i”）.getContext（“2d”）；
c、 fillStyle=“#0048e0”；
c、 fillRect（0,0250180）；
c、 fillStyle=“白色”；
c、 fillRect（0,55250,40）；
c、 fillRect（55,0,40180）；
c、 fillStyle=“#d72828”；
c、 fillRect（0,65250,20）；
c、 fillRect（65,0,20180）；

这是因为您没有设置元素的大小（宽度和高度）。因此，它们被设置为默认值，分别为

300

和

150

。因此，您的标志矩形被剪裁为

（280150）

矩形。由于这种剪裁，白色和红色条纹看起来是错误的，尽管它们实际上渲染正确

因此，您必须通过分配DOM元素的相应属性来明确设置画布的

宽度

和

高度

：

var canvas=document.getElementById("i");
canvas.width = 250;
canvas.height = 180;
var c=canvas.getContext("2d");
c.fillStyle="#0048e0";
c.fillRect(0,0,250,180);
c.fillStyle="white";
c.fillRect(0,70,250,40);
c.fillRect(70,0,40,180);
c.fillStyle="#d72828";
c.fillRect(0,80,250,20);
c.fillRect(80,0,20,180);

---

这是因为您没有设置元素的大小（宽度和高度）。因此，它们被设置为默认值，分别为

300

和

150

。因此，您的标志矩形被剪裁为

（280150）

矩形。由于这种剪裁，白色和红色条纹看起来是错误的，尽管它们实际上渲染正确

因此，您必须通过分配DOM元素的相应属性来明确设置画布的

宽度

和

高度

：

var canvas=document.getElementById("i");
canvas.width = 250;
canvas.height = 180;
var c=canvas.getContext("2d");
c.fillStyle="#0048e0";
c.fillRect(0,0,250,180);
c.fillStyle="white";
c.fillRect(0,70,250,40);
c.fillRect(70,0,40,180);
c.fillStyle="#d72828";
c.fillRect(0,80,250,20);
c.fillRect(80,0,20,180);

---

同样的想法，适合你：D同样的想法，适合你：D