javascript - 为什么这些 x,y 坐标在 fillRect 中起作用

Question

感兴趣后this code golf question ，我决定快速构建一个 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>

Answer 1

那是因为您没有设置 canvas 的尺寸(宽度和高度)元素。因此它们被设置为默认值，分别为 300 和 150。因此，您的标志矩形将被剪切为 (280, 150) 矩形。由于这种剪裁，白色和红色条纹看起来是错误的，尽管实际上它们渲染正确。

因此，您必须通过分配 DOM 元素的相应属性来显式设置 Canvas 的宽度和高度:

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);