Javascript : Canvas 入門-はじめの一歩

Canvasでお絵かき

Javascriptでお絵かきアプリを作りたい

こちらのサイトを理解したく、Canvasの勉強始めます。

context.beginPath()   すべての描画をリセット(消す)

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(500, 250);

ctx.beginPath();  // 描いてあるもの消す
ctx.moveTo(200,150);  // 描き始める始点
ctx.arc(120,150,80,0,2*Math.PI);  //円を描く
    
ctx.stroke();  //描画する

前の線消えてる

//ctx.beginPath(); // 描いてあるもの消す。コメントアウトすると

線表示

前半の線も表示されてます。

ctx.moveTo(200,150);      // 描き始める始点

これをコメントアウトすると

線の終わりから、つながった線も表示されます。

線の終点が、円の始点に

コメント

タイトルとURLをコピーしました