WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

canvas 図形を描く

こちらを参考にしました。
developer.mozilla.org

前回の記事
mmmmofu.hatenablog.com

デモ
http://efu.sakura.ne.jp/web/canvas/index2.html

矩形を描く

canvas は 「矩形」(四角形)のみをサポートしています。

矩形 塗りつぶされた矩形を描く

ctx.fillRect(x, y, width, height);

矩形の輪郭を描く

ctx.strokeRect(x, y, width, height);

矩形 指定した領域が透明になる

ctx.clearRect(x, y, width, height);

f:id:mmmmofu:20180418124034j:plain

  <canvas id="canvas02" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
  </canvas>
/*++++++++++++++++++++++++++++++++++
矩形を描く
++++++++++++++++++++++++++++++++++*/

var canvas = document.getElementById('canvas02');

var ctx = canvas.getContext('2d');

//塗りつぶされた矩形を描く
ctx.fillRect(25, 25, 100, 100);

//矩形の輪郭を描く
ctx.strokeRect(100, 100, 50, 50);

//指定した領域が透明になる
ctx.clearRect(25, 25, 60, 60);

三角形を描く

f:id:mmmmofu:20180418124055j:plain
矩形以外の図形はパスで描く必要があります。

直線を描く

lineTo(x, y)
現在の描画位置から x と y で指定した位置に線を描きます。

  <canvas id="canvas03" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
  </canvas>
/*++++++++++++++++++++++++++++++++++
三角形を描く
++++++++++++++++++++++++++++++++++*/

var canvas2 = document.getElementById('canvas03');

var ctx2 = canvas2.getContext('2d');

//新しいパスを作成
ctx2.beginPath();

//指定した座標にペンを移動
ctx2.moveTo(0,100);

//指定した位置に線を描く
ctx2.lineTo(150,200);
ctx2.lineTo(150,0);

//パス内を塗りつぶす
ctx2.fill();
広告を非表示にする