LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2018年1月21日日曜日

canvasで円を描く


こういう円を描いてみる



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="360" height="240"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    var x = 100;
    var y = 75;
    var r = 50;
    var start_angle = 0;
    var end_angle = 2 * Math.PI;
    var counterclockwise = true;
    context.arc(x, y, r, start_angle, end_angle, counterclockwise);
    context.stroke();
  </script>
</body>
</html>
意訳
これはHTML5文書です


canvasを置く

canvasを取得して
2次元の描画機能を有効にして
パス(軌道)の描画を新しく始める
x座標
y座標
半径
開始角度
終了角度
反時計回り
context.arc( x座標, y座標, 半径, 開始角度, 終了角度, 時計回り)を設定して
描く





参考

HTML canvas arc() Method
https://www.w3schools.com/tags/canvas_arc.asp

最新の投稿

現在日時から四半期の開始日と終了日を知りたい

今の日時を取得して、現在の四半期の開始日と終了日を知りたくて書いたコードです。 コード.gs function myFunction() { const month = new Date().getMonth() + 1;// monthは0始まりなので+1 ...