こういう青い直線を描くコード
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<style>
#canvas1 {
width: 30vw;
height: 30vh;
border: solid 1px lightgray;
}
</style>
<body>
<canvas id="canvas1"></canvas>
<script>
var color = "royalblue";
var width = 10;
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
context.strokeStyle = color;
context.lineWidth = width;
function draw() {
var TopX = 0;
var TopY = 0;
var BottomX = 0;
var height = canvasHeight;
context.beginPath();
context.moveTo(TopX, TopY);//線の出発点(X座標の出発点とY座標の出発点)
context.lineTo(BottomX, height);//線の終点（X座標の終点, Y座標の終点）
context.closePath();
context.stroke();
};
draw();
</script>
</body>
</html>
|
参考
CanvasRenderingContext2D.beginPath()
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.beginPath()
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.closePath()
CanvasRenderingContext2D.stroke()
CanvasRenderingContext2D
