view source

JavaScript

var drawSample = function(){

  var stage = acgraph.create('stage-container');
  var frame = stage.rect(0, 0, 400, 400);

  var rect = stage.rect(100, 100, 200, 200);
  var circle = stage.circle(200, 200, 200);

  var linePath  = stage.path()
    .moveTo(0, 0)
    .lineTo(400, 400)
    .moveTo(400, 0)
    .lineTo(0, 400)
    .close();

  var curvePath  = stage.path()
    .moveTo(0, 200)
    .curveTo(100, 0, 300, 400, 400, 200);

}


var draw = function(d){
  var stage = acgraph.create('stage-container');
  var circle = stage.circle(d.cx, d.cy, d.r);
}

$(function(){
  $('<div>', {id: 'stage-container'}).css({height:'600px'}).appendTo('#demo');
  drawSample();

  $('input').each(function(){
    var name = $(this).attr('name');
    var val = $(this).val();
    var nameEle = $('<span>').addClass('name').text(name);
    var valEle = $('<span>').addClass('val').text(val);
    $(this).before(nameEle).before(valEle);
  });

  $('input').on('change', function(){
    var val = $(this).val()
    $(this).parent().find('.val').text(val);

    var data = {}
    $('#stage-container').empty();
    $('label input').each(function(v){
      var ele = $(this);
      var v = ele.val();
      var name = ele.attr('name');
      data[name] = v;
    })
    console.log(data);
    draw(data);
  });
});


//http://www.graphicsjs.org/
//https://cdn.anychart.com/js/latest/graphics.min.js

CSS

label{
  display:block;
}
label span{
  display:inline-block;
  width:50px;
}

label span.name:after{
  display:inline;
  content:" : ";
}

HTML

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

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

ABOUT

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

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

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

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

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

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

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

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