HTML で図形を描く 【Python】

Python

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

以下の環境で動作確認をしています。
環境: Windows 10、Python 3.X (+ Anaconda 3)

背景

Python でプログラムを作っていると、新たなパッケージ・ライブラリをインストールすることなく、また、ウェブサーバーなどの特殊な環境なしで、図形を HTML で出力・表示したくなることがあります。

そこで、最も基本的な例として、円、矩形、直線、三角形などの図形を HTML ファイルで出力するサンプルについてまとめておきます。具体的には、Python で SVG 描画を行います。

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

設定方法

PC に任意のフォルダを作成してください。
例: c:\user
その中に figure01.py 等の名前でテキストファイルを作成し、下記のスクリプトをコピー&ペーストして保存してください。

使い方

① コンソール(または開発環境)で、上記の Python スクリプト figure01.py を実行してください。
→ 同じフォルダ内に HTML ファイル(figures01.html)が生成されます。
② 生成された HTML ファイルをダブルクリックして、ブラウザで表示させてください。
→ 図形が表示されたら成功です。

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

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

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

まとめ

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

JavaScript などの機能をまったく使わずに、かなり多彩な表現ができることがわかります。
画像ファイル(*.png、*.jpg、…)すら使っていません。
Python から HTML のタグを生成させることで、理屈上は数百個のポリゴンを描くなど、より複雑な図形を描画することも可能となります。

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

関連リンク
・ ベン図を HTML で出力する 【Python】
・ HTML のグラフを出力する 【Python】
・ HTML のカレンダーを生成する 【Python】
・ 配列(リスト)の読み書き・HTML 出力 サンプルコード
・ 円、矩形、直線を描画&ドラッグできるようにする【tkinter】

サンプルコード: 標準の HTML 形式で図形を埋め込む

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 ) 
タイトルとURLをコピーしました