view source

JavaScript

// SNGでは角度を指定入力はできないので、手動かJavaScriptで座標を計算する

var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
var svgNS = svg.namespaceURI;

svg.setAttribute('width', 400);
svg.setAttribute('height', 400);

container = document.getElementById('demo');
container.appendChild(svg);

var m = 'M 200,200 ';
var p = 'l 100,0 ';
var pTemp = 'l {x},{y} ';
var deg = 0;
var x = 200;
var y = 200;


var circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
circle.setAttribute('r', 10);
circle.setAttribute('fill', '#000');
svg.appendChild(circle);

var line = document.createElementNS(svgNS, 'path');
line.setAttribute('fill', 'none');
line.setAttribute('stroke', '#000');
svg.appendChild(line);


//多角形を計算する
var calcPolygonPath = function(corner, isStar){

  var cx = 200;
  var cy = 200;
  var l = 100;
  var d = '';
  corner = Number(corner);
  if(isStar){
    corner = corner*2;
  }
  var corners = new Array(corner).fill().map((_, i) => i);
  var points = [];

  corners.forEach(function(v, index){
    var r = l
    if(isStar && index%2===0){
      r = r/2;
    }
    var rad = v * (Math.PI * 2) / corner;
    var x = cx+Math.cos(rad)*r;
    var y = cy+Math.sin(rad)*r;
    points.push({x:x, y:y});
  });

  console.log(points);
  points.forEach(function(v, index){
    var order = 'L';
    if(index === 0){
      order = 'M';
    }
    d += order + v.x + ',' + v.y +' ';
  });
  d += 'z';
  console.log(d);
  line.setAttribute('d', d);
}


$(function(){
  var form = $('<div>').appendTo('#demo');
  var inputStar = $('<input>', {type:'checkbox',name:'star', title:'star'});
  var input = $('<input>', {type:'number', title:'angle deg(0-360)', min:0, max:45})
    .val(3);
  input.on('change', function(){
    var corner = Number($(this).val());
    var isStar = inputStar.prop('checked');
    console.log(isStar);
    calcPolygonPath(corner, isStar);
  }).trigger('change');
  form.append(input).append(inputStar);

});


/*
*/

CSS

#demo span{
  display:inline-block;
  padding:12px;
}

HTML

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

view-source:https://hi0a.com/demo/-svg/svg-js-angle-polygon/

ABOUT

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

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

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

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

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

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

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

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