LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Sunday, January 21, 2018

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

スプレッドシートA列にある複数のテキストをスライドに追加したい(Google Apps Script)

今回Google Apps Scriptでやりたいこと GoogleスプレッドシートA列にある複数の値を取得して Googleスライドに渡して 図形オブジェクトのテキストとして追加したい ① スプレッドシートのA列に値を入れておく ② Code.gsのinsertNewShape...