◇図形（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グラフィクス

表 3 . ベクター・グラフィックスとしての canvas と svg

項目	canvas	svg

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

―蝙蝠山卿の暗黒學問塾― 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を使うのとあまり変わらないかも。