view source

JavaScript

document.title = 'Canvasで正多角形を描画 重複を避けて配置描画';

$(function(){
  var w = document.body.clientWidth;
  var h = window.innerHeight;
  var wh = Math.min(w,h);
  var padding = 10;
  var r = 80;
  var cx = r+padding;
  var cy = r+padding;

  var canvas = $('<canvas>',{width:w, height:h});
  canvas[0].width = w;
  canvas[0].height = h;
  $('#demo').append(canvas);
  var ctx = canvas[0].getContext('2d');



  function pathRound(x1,y1,x2,y2,w=24,r=8){

    var xl = x2-x1;
    var yl = y2-y1;
    var rad = Math.atan(yl/xl);
    var color = '#f00';
    var pi2 = Math.PI/2;
    
    ctx.beginPath();
    ctx.fillStyle = color || '#000';
    ctx.strokeStyle = color || '#000';
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.strokeStyle = '#000';
    ctx.arc(x1+Math.cos(rad+pi2)*(w-r), y1+Math.sin(rad+pi2)*(w-r), r, rad-pi2/4, rad+pi2/4, true);
    ctx.moveTo(x1+Math.cos(rad+pi2)*w, y1+Math.sin(rad+pi2)*w);
    ctx.lineTo(x2+Math.cos(rad+pi2)*w, y2+Math.sin(rad+pi2)*w);

    ctx.moveTo(x1+Math.cos(rad-pi2)*w, y1+Math.sin(rad-pi2)*w);
    ctx.lineTo(x2+Math.cos(rad-pi2)*w, y2+Math.sin(rad-pi2)*w);

    ctx.stroke();
    ctx.closePath();
  }



  function pathLineW(x1,y1,x2,y2,w=8,r=8){
    var xl = x2-x1;
    var yl = y2-y1;
    var rad = Math.atan(yl/xl);
    var color = '#f00';
    var pi2 = Math.PI/2;
    
    ctx.beginPath();
    ctx.fillStyle = color || '#000';
    ctx.strokeStyle = color || '#000';
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.strokeStyle = '#000';
    ctx.moveTo(x1+Math.cos(rad+pi2)*w, y1+Math.sin(rad+pi2)*w);
    ctx.lineTo(x2+Math.cos(rad+pi2)*w, y2+Math.sin(rad+pi2)*w);
    ctx.moveTo(x1+Math.cos(rad-pi2)*w, y1+Math.sin(rad-pi2)*w);
    ctx.lineTo(x2+Math.cos(rad-pi2)*w, y2+Math.sin(rad-pi2)*w);
    ctx.stroke();
    ctx.closePath();
  }


  $(document).on('keydown', function(e){
    ctx.clearRect(0, 0, w, h);
    polygons = [];
  });
  pathRound(100,100, 300,400);
  pathLineW(200,200, 500,600);

})

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-canvas-path-round/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。