js-canvas-path2d

js-canvas-path2d hi0a.com


  view source
  JavaScript
  const container = document.getElementById('demo');
const canvas = document.createElement('canvas');

container.appendChild(canvas);


// Canvasのコンテキストを取得
//const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// T字形の中心座標
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 幅50、高さ100のT字形を描く
const width = 50;
const height = 50;

// Path2DでT字形を作成（時計回り）
const path = new Path2D();
path.moveTo(centerX + width*2/3, centerY + height / 2); // 右下
path.lineTo(centerX - width*2/3, centerY + height / 2); // 左下
path.lineTo(centerX - width*2/3, centerY + 0); // 
path.lineTo(centerX - width*1/3, centerY + 0); // 
path.lineTo(centerX - width*1/3, centerY - height/2); // 
path.lineTo(centerX + width*1/3, centerY - height/2); // 
path.lineTo(centerX + width*1/3, centerY +0); // 
path.lineTo(centerX + width*2/3, centerY +0); //  
path.closePath();  // パスを閉じる

// T字形のパスを描く
ctx.fillStyle = "black";
ctx.fill(path);
ctx.fill(path);

  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-canvas-path2d/
  
  ABOUT
  
    hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    仕様変更、API廃止等、実験途中で動かないページもあります。