canvasで図形を描画するメソッドやプロパティなどのメモ
準備
HTML
<canvas id="canvas" width=400 height=200>
Canvas not supported.
</canvas>
JS
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
メソッドやプロパティなど
直線を描く
JS
// 線(直線や曲線)を描き始める前の準備
// 線に関する座標の情報をPathという。
// Pathをリセットする
ctx.beginPath();
// 線を描き始める座標を指定する
ctx.moveTo(x, y);
// 直線を描き終わる座標を指定する
ctx.lineTo(x, y);
// 続けて2本目の直線を書き終わる座標を指定することもできる
// 今回は書きはじめの座標は1本目と共通
ctx.lineTo(x2, y2);
// 線の色
ctx.strokeStyle = 'orange';
// 先の太さ
ctx.lineWidth = 6;
// 上記メソッド・プロパティに基づいて線を描く
ctx.stroke();
円弧を描く
ラジアンはMath.Pi / 180 * 角度
などで指定
JS
ctx.beginPath();
ctx.arc(中心x, 中心y, 半径, 描き始めのラジアン, 描き終わりのラジアン );
this.ctx.stroke();
四角形を描く
JS
// 塗りつぶす色
ctx.fillStyle = 'red';
// 四角形を描く
ctx.fillRect(四角形左上のx座標, 四角形左上のy座標, 幅, 高さ);
その他
JS
原点を移動する
ctx.translate(x, y);
原点を中心に回転する
ctx.rotate(Math.PI / 180 * 角度);
JS
// メソッドやプロパティで設定した座標や
// 線の色・太さなどを記憶する
ctx.save();
// 記憶したものを呼び出す
ctx.restore();
JS
// <canvas>要素の幅や高さを取得する
const width = canvas.widht;
const height = canvas.height;
JS
// ブラウザが<canvas>に対応しているか
// 対応していなければreturnで終了。
// returnは関数内でしか使えないので即時関数で囲むなどする必要がある。
const canvas = document.querySelector('canvas');
if (typeof canvas.getContext === 'undefined') {
return;
}
Author And Source
この問題について(canvasで図形を描画するメソッドやプロパティなどのメモ), 我々は、より多くの情報をここで見つけました https://qiita.com/manten120/items/32b387f2af5bb69f7959著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .