まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ：arc

HTML5 の Canvas を使うことで HTML の画面内にコンテキストを利用した図形を比較的自由に描くことができるようになります。この機能の１つである arc() 関数を使うと、下図のような「円の弧」を描画できます（塗りつぶすかどうかは選択できます）：
2019112203


この弧を描く際のコードは以下のようなものです：
  :
<script>
  var canvas1 = document.getElementById( 'myCanvas1' );
  if( !canvas1 || !canvas1.getContext ){
    return false;
  }
  var ctx1 = canvas1.getContext( '2d' );

  //. 円の情報
  var r = 80;
  var x0 = 100;
  var y0 = 100;

  var deg = 190;
  ctx1.beginPath();
  ctx1.arc( x0, y0, r, -90 * Math.PI / 180, deg * Math.PI / 180, false );
  ctx1.fillStyle = "rgba( 255, 128, 128, 0.8 )";
  ctx1.fill();
</script>

<body>
<canvas id="myCanvas1"></canvas>
</body>
  :

で、このような図形を描くのが目的であればいいのですが、パックマンのような（円からピザの一部を切り取ったような）画像を描きたい場合はこれでは目的の画像とは異なります。なんとかしてパックマン型に塗りつぶした弧を描く方法はないでしょうか？　というのが今回のテーマです。





2019112202


結論としては可能で、「arc() 関数の実行直後に円中心に向かって直線を引く」のがその答えになります：

  :
<script>
  var canvas1 = document.getElementById( 'myCanvas1' );
  if( !canvas1 || !canvas1.getContext ){
    return false;
  }
  var ctx1 = canvas1.getContext( '2d' );

  //. 円の情報
  var r = 80;
  var x0 = 100;
  var y0 = 100;

  var deg = 190;
  ctx1.beginPath();
  ctx1.arc( x0, y0, r, -90 * Math.PI / 180, deg * Math.PI / 180, false );
  ctx1.lineTo( x0, y0 );
  ctx1.fillStyle = "rgba( 255, 128, 128, 0.8 )";
  ctx1.fill();
</script>

<body>
<canvas id="myCanvas1"></canvas>
</body>
  :

これでパックマンが描画できました：
2019112200

 
タグ ：
#html5
#canvas
#arc
#pacman

StrongLoop の API プラットフォームにおける利用状況や接続先データソースをグラフィカルな UI で管理するツールが StrongLoop Arc です：
https://strongloop.com/node-js/arc/


StrongLoop （や LoopBack ）の slc コマンドを導入済みの環境であればすぐに使うことができます。試しに LoopBack で API を作った時の環境を使って、StrongLoop Arc を利用してみます。LoopBack を導入する手順についてはこちらを参照ください：
CentOS に StrongLoop をインストールする


上記手順を行い、"myapp2" という名前で LoopBack アプリケーションが作られていると仮定します。この環境を使って、StrongLoop Arc を利用するには、アプリケーションフォルダに移動して、"slc arc" コマンドを実行します：
# cd myapp2
# slc arc

するとこんな感じで StrongLoop Arc が起動します。以下の例では 41241 番ポートで起動していますが、このポート番号は動的に変わるようです：

2016021810


ではこの環境にウェブブラウザでアクセスしてみましょう。なお、StrongLoop Arc はリモートアクセスを許可していないので、この StrongLoop 環境を導入したマシンそのものにログインしてからウェブブラウザで http://localhost:XXXXX/ にアクセスする必要があります：
2016021801


StrongLoop Arc を使うにはアカウントが必要です。まだお持ちでない場合は画面右上のハンバーガーメニューから "register" を選んで登録を行います：
2016021802


登録するユーザーのメールアドレスを指定して "Submit"：
2016021803


指定アドレスに StrongLoop からメールが届いたら、メール内のリンクをクリック：
2016021804


で、ユーザー名やパスワードやら、残りの項目を登録します：
2016021805


最後に同意チェックを入れて Submit ！これでアカウント登録完了です：
2016021806


改めてこの画面から登録ユーザー名（またはメールアドレス）とパスワードを指定してログインします：
2016021807


ログイン直後の画面がこちらです。コマンドラインの slc コマンドで行っていたような作業を GUI で行えるようになります：
2016021808


試しにデータソースを管理してみましょう。"Composer" をクリックすると、現在（LoopBack を使った時に登録した）データソースが確認でき、またここから新規にデータソースを定義することもできるようです：
2016021809


プロセスマネージャーを登録してトレーシング・・・　などもやってみたかったのですが、何故か上手く行かなかったのでそちらについてはまた別途、かな。


タグ ：
#strongloop
#arc

このページのトップヘ