Canvas-ストロークと塗りつぶし

ストローク

ストローク

キャンバス一般的に使用されるstroke方法は、アウトラインのためのストローク方法にあります。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.stroke();

strokeStyle

名前が示すように、strokeStyleそれは簡単に言えば、ストロークのスタイルを記述するために使用され、エッジの色です。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.strokeStyle = 'blue';   //设置边的颜色为蓝色
ctx.stroke();

strokeRect

四角形の描画方法は、脳卒中によるものです。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.strokeRect(100, 100, 150, 100);

充填

埋めます

充填された閉じた内部空間である色で、充填します。

たとえば、

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.fillStyle = 'green';
ctx.fill();

直線が閉じた領域を形成することができないため、この例で見ることができ、それは、何も描画されません。缶に結合された場合は、

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.fillStyle = 'green';
ctx.fill();

fill自動的に閉じた領域を形成し、充填する方法。

fillRect

ありstrokeRect、自然にそこに、fillRectパラメータも同様です。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillRect(100, 100, 150, 150);

fillStyle

同様に、fillStyleまた、塗りつぶしスタイルは、すなわち、塗りつぶしの色、変更します。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.fillRect(100, 100, 150, 150);