HTML で図形を描く【Python】 | いろはぷらっと

Python で、HTML ファイル形式で図形を描く方法についてまとめておきます。Python でお絵描きです。
必要最小限の知識で動くよう、意図しています。

以下の環境で動作確認をしています。
環境： Windows パソコン、Python 3.X （+ Anaconda 3）

背景

Python でプログラムを作っていると、新たなパッケージ・ライブラリをインストールすることなく、また、ウェブサーバーなどの特殊な環境なしで、図形や文字を表示したくなることがあります。
HTML 形式で出力すれば、パソコンやスマートフォンなどの機種によらず、ブラウザでそのまま表示できるため、とても便利です。

そこで、最もベーシックな事例として、円、矩形、直線、三角形や文字を HTML ファイルで出力するスクリプトについてまとめておきます。具体的には、Python で SVG 描画を行います。

ネット検索をすると、すぐに使える程度にまとまった Python のスクリプトが見つからないようでしたので、ポイントを整理しておきます。Python とブラウザがあれば、図形など可視化ができるようになります。

設定方法

①　以下を参考に、パソコンにフォルダを作成してください。
例： c:\user\figures1
②　①のフォルダの中に figures1.py 等の名前でテキストファイルを作成し、下記のスクリプトをコピー＆ペーストして保存してください。
例： c:\user\figures1\figures1.py

使い方

③　コマンドプロンプトを起動し、上記のスクリプト figure1.py を実行してください。
例： python c:\user\figures1\figures1.py
→　同じフォルダ内に HTML ファイル（figures01.html）が生成されます。

④　生成された HTML ファイルをダブルクリックして、ブラウザで表示させてください。
→　図形が表示されたら成功です。

うまく動いたら、スクリプト上の各図形の位置（座標）やサイズを変えて、再度実行してみてください。

サンプルコードの説明： HTML の埋め込み

・　サンプルコードは、Python のスクリプトに HTML の文字列をそのまま埋め込んでおき、出力する事例です。
・　str1 = ”’ … ”’.format( ) としたところで、ベタ書きのテキストを定義しています。具体的には、HTML の流儀に従い、<html></html> や <body></body> 等を含むテキストをそのまま埋め込んでいます。
・　図形は、ブラウザの SVG の機能を使って描画しています。
具体的には、<body></body> 内に <svg …>…</svg> タグを入れることで描画をします。この SVG のタグの中に、直線、円、矩形、三角形（ポリゴン）、テキストの行をそれぞれ追加しています。
・　それぞれ、起点となる座標、サイズ、線幅、色等を指定しています。
この部分をカスタマイズすれば、位置、個数、大きさ、色などを変えた好きな図形を描くことができます。
うまく動いたら、数値や図形の個数などを変えてアレンジしてみてください。

まとめ

Python で基本図形を HTML ファイルで出力するスクリプトについてまとめました。

JavaScript などの機能を使わずに自由な表現ができることがわかります。
画像ファイル（*.png、*.jpg、…）や canvas すら使っていません。
SVG などのタグは、Python のプログラムでいくらでも生成することができます。多数の図形を生成するとで、より複雑な図形を描画することが可能です。

なお、ここで示したサンプルは、最低限の基本図形と文字のみの最もシンプルな事例です。
SVG を使った応用例などを、以下の関連リンクなどにまとめています。
もし関心があるようでしたら、参考にしてみてください。

サンプルコード： SVG で図形描画 figures1.py

import os 

def write1( file1, str1 ): 
    with open( file1, 'w', encoding='utf-8' ) as f1: 
        f1.write( str1 ) 
    return 0 

def generate_html1(): 
    str1 = ''' 
<html lang="ja">
<body>
  <svg width="600" height="400" viewBox="0 0 600 400" style="background:#f7f7f7" >
    <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" /> 
    <circle cx="300" cy="100" r="50" stroke="black" stroke-width="1" fill="#fff0f0" />
    <rect x="450" y="50" width="100" height="100" stroke="black" stroke-width="1" fill="#f0fff0" /> 
    <polygon fill="#e0e0ff" stroke="black" stroke-width="1" points="250,300 350,300 300,213" /> 
    <text x="265" y="360" font-family="meiryo" font-size="20" >テキスト</text>
  </svg>
</body> 
</html> 
'''
    return str1 

path1 = os.path.dirname(__file__) + "/" 

str1 = generate_html1()  

file1 = path1 + "figures01.html" 
write1( file1, str1 )