LANG SELRCT

コードを書く場所についてはこちら

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