これらのx、y座標がfillRectで動作する理由

Question

this code golf questionに興味があった後、私はすぐに一緒にjavascriptソリューションをスローすることにしました。挑戦は、アイスランドの旗を作成することであり、比率は質問内で定義されています。

フラグは25:18の比率でなければならないため、250x180pxサイズのフラグを作成しました。白い水平のストライプは、上から7単位で始まります。 （1単位= 10px）だから、これは上から70pxを意味すると思います。しかし、コードを作成するには、x、y座標を変更しなければなりませんでした。

コードは以下の通りです。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);