◇図形（canvas）の使い方

卒業論文、修士論文、博士論文、学術論文、特許明細書などでは、図面、図表、図形の表現が併用されます。グラフ、回路図、フローチャート、写真、イラスト（ロゴ、アイコン、アバター）、地図などがあります。 3Dも図面です。数式、化学式、反応式などの式も図面として、本文とは別に扱われます。

学術的な性質を有する図面、図表、図形、音楽、講演、映画、写真、建築、プログラムは、著作権法に定められた著作物です。引用する場合は、慣例に従い、転載する場合は、転載許諾をとりましょう。法令順守は研究倫理です。

図

制御と結果

大きさ：

角度：

幅： 1

canvasを使うと、クライアント側での描画ができます。通信やサーバーサイドの負荷を下げて動画の表示もできます。インタラクティブなページも作れます。

図面の線

表 1 . 図面の線

線の種類	線	用途

太い実線		外形線
細い実線		寸法線、引出線、ハッチング
細い破線		かくれ線
細い一点鎖線		中心線、基準線
細い二点鎖線		想像線

製図（drawing）は工学部の基本。外形線は太く0.7mm≒2pt以上で書きます(1.5ptぐらい)。あいまいな線は描いてはいけません。ほかの線は、0.5ptぐらいです。 Z8317-1:2008 によると矢印の末端記号は30°塗りつぶし矢，30°白抜き矢，30° 開き矢，90°開き矢，斜線(45°傾斜）と規定されており，寸法数字の記述スペースから90°開き矢に近似される矢印記号に修正をしました．また，寸法数字ですが，最近の機械製図の教科書 ^1

) や Z8317-1:2008 の例をみると，寸法数字はローマン体なので，イタリック体（斜体）からローマン体（立体）に修正しています．直径記号φは斜体のようです． html で描くときには svgなどのベクター形式を使います。 (工業技術基礎)

2dグラフィクス

―蝙蝠山卿の暗黒學問塾― Canvas APIの基礎

言語	形式

java script	canvas	png		インタラクティブ、アニメーションが可能。 Webアプリ向け。 3次ベジェ曲線実装。
java script	svg	svg		htmlに埋め込み可能。ベクトルグラフィックスに関する機能が豊富。 3次ベジェ曲線実装。 viewBox=を設定することで、ワールド座標系でグラフィクス可能。一旦、svgファイルにしてpptにインポートすれば、pngに変換可能。 asp(Basic、サーバーサイド)で記述することも可能。
python	matplotlib	png		ワールド座標系でグラフィクス可能。ビュー座標系 / スクリーン座標系への煩わしい変換から解放されます。ベジェ曲線とか、コーディングが必要かも。縦軸、横軸にTeXが使えるので超便利。
	svg		matplotlibから svgに出力するには、 plt.savefig('fig1.SVG') files.download("fig1.SVG") plt.show() のようにする。 *
	PIL	png		Colaboからでは、img.show()ではなく、IPython.display のdisplay(img)を使うなど、ちょっと変則的。
	OpenCV	png		グラフィックスというより画像処理向け。 Colaboからは、 matplotlib を使った出力になるので、ベクトルグラフィックスならば、matplotlib.patchesを使うのとあまり変わらないかも。

項目	canvas	svg

画像としてダウンロード	JavaScriptで、ビットマップに描画するので、 png形式で可。	xmlの記述をブラウザがレンダリングするので直接は不可。 svgをファイルにして、パワーポイントに読み込み、png形式で保存することで可能。
クローラ／読み上げ	クローラには何が書いてあるかわらない。 Google Lensなら少しわかるかも。	xmlの記述なので、マシンリーダブル。読み上げも可能かも。
🧪 🏞 ヘクトライトの例	*	*