Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

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

Latest post

Google Formsで記述式の質問に字数制限を設定したい

記述式の質問には「回答の検証」を設定することができます フォームの編集画面 右下の︙メニューで「回答の検証」を選択します 検証方法には「数値」「テキスト」「長さ」「正規表現」という種類があります 今回は字数制限したいので「長さ」を選びます 長さには「最大文字数」か「最小文字数」を...