Canvas-線、長方形や円

直線

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

moveToこれは、ブラシを移動として理解することができ、モバイルです。lineTo現在の位置から直線を描画するための指定された場所です。次のように上記のコードの効果は以下のとおりです。

それは何も問題が見えますが、実際には、最初の行が2回描かれています。

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

ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

二行は、それぞれ描かれている場合は、赤、青でなければならない後者ならば、stroke方法は、2本の線が再び描かれているであろう、二人は青です。

その理由はmoveTo、lineToこれらの動作は、メモリ動作であり、画面に描かれていない、呼び出しstroke、それが真に描かれる方法ので、2つのラインのパスに格納されたメモリの第二のようにstrokeメソッドが呼び出されたとき、最初の行にも描かれました。

そして、どのようにこの問題を解決するには？

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

ctx.beginPath();    //引入beginPath方法
ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

初回のみstroke後の呼び出し方法beginPath方法がすることができます。パスをクリアします。このメソッドの前にメモリに保存されています。

長方形

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

あなたは線を引くの方法により長方形を描きますが、呼び出すことができますがstrokeRect方法がより便利になります。

この方法は、4つのパラメータを受け取り、最初の二つは、矩形座標の左上隅に描画され、後者の二つは、長方形の幅と高さです。

ラウンド

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.arc(300, 300, 100, 0, 2*Math.PI);
ctx.stroke();