Question

在对this code golf question感兴趣之后，我决定快速抛出一个javascript解决方案，而不是试图打高尔夫球。挑战是创建冰岛国旗，并在问题中定义比例。

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

代码在下面，任何人都可以解释为什么而不是70px和80px（分别为白色和红色条纹）我必须使用55px和65px？我必须是直截了当的，但我很困惑。

<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元素的相应属性来显式设置画布的width和height：

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

为什么这些x，y coords在fillRect中起作用

1 个答案: