JupyterLabとipycanvasでテキストのアライメントを設定する

ipycanvasでcanvasを使用して様々な図形を描画する事ができます。
テキストのアライメントを設定するには、text_align属性を使用します。

'start', 'end', 'left, 'right', 'center'が指定できます。

サンプルコード

以下のサンプルコードでは、アライメントを右寄せに設定して文字列を描画しています。

from ipycanvas import Canvas

canvas = Canvas(width=200, height=100)

canvas.fill_style = '#F25E5E'

canvas.font = '32px sanserif'
canvas.text_align = 'right'
canvas.fill_text("テストです", 200, 70)

canvas.stroke_rect(0, 0, 200, 100)
canvas

〇サンプルコードの実行結果

関連情報

・ipycanvasのインストールは、以下を参照してください。
JupyterLabにipycanvasをインストールして、ノートブックにcanvasを利用して図形を描画する

JupyterLabとipycanvasでテキストを描画する

ipycanvasでcanvasを使用して様々な図形を描画する事ができます。
テキストを描画する場合は、以下のメソッドを使用します。

・ stroke_text(text, x, y, max_width=None)
指定した文字列textをx, yの座標(テキスト左下位置)に中抜き描画します。max_widthを指定すると超えた場合、指定した幅に圧縮されます。

・ fill_text(text, x, y, max_width=None)
指定した文字列textをx, yの座標(テキスト左下位置)に塗りつぶし描画します。max_widthを指定すると超えた場合、指定した幅に圧縮されます。

font属性でフォントの大きさと種類を指定できます。デフォルトは'12px serif'です。

サンプルコード

以下のサンプルコードで文字列を描画します。

from ipycanvas import Canvas

canvas = Canvas(width=200, height=100)

canvas.stroke_style = '#7799dd'
canvas.fill_style = '#F25E5E'

canvas.font = '32px sanserif'
canvas.stroke_text("テストです", 10, 50)
canvas.fill_text("テストです", 10, 90)

canvas

〇サンプルコードの実行結果

関連情報

・ipycanvasのインストールは、以下を参照してください。
JupyterLabにipycanvasをインストールして、ノートブックにcanvasを利用して図形を描画する

JupyterLabとipycanvasで二次曲線を描画する

ipycanvasでcanvasを使用して様々な図形を描画する事ができます。
二次曲線を描画する場合は、以下のメソッドを使用します。

・begin_path()
パスの作成を開始します。

・move_to(x, y)
ペンを指定座標に移動します。

・quadratic_curve_to(cp1x, cp1y, x, y)
二次曲線はパスでの最後の位置から新たな座標(最後の２つの引数x, y)まで、制御点を使って描画します。

・stroke()
パスの設定で線を描画します

サンプルコード

以下のサンプルコードで二次曲線を描画します。

from ipycanvas import Canvas

canvas = Canvas(width=200, height=100)

canvas.stroke_style = '#7799dd'

canvas.begin_path()
canvas.move_to(10,50)

# 二次曲線
# 制御点
cp1x = 100
cp1y = 5
canvas.quadratic_curve_to(cp1x,cp1y, 190,50)

canvas.stroke()
canvas

〇サンプルコードの実行結果

関連情報

・ipycanvasのインストールは、以下を参照してください。
JupyterLabにipycanvasをインストールして、ノートブックにcanvasを利用して図形を描画する

JupyterLabとipycanvasでベジェ曲線を描画する

ipycanvasでcanvasを使用して様々な図形を描画する事ができます。
ベジェ曲線を描画する場合は、以下のメソッドを使用します。

・begin_path()
パスの作成を開始します。

・move_to(x, y)
ペンを指定座標に移動します。

・bezier_curve_to(cp1x, cp1y, cp2x, cp2y, x, y)
ベジェ曲線はパスでの最後の位置から新たな座標(最後の２つの引数x, y)まで、２つの制御点を使って描画します。

・stroke()
パスの設定で線を描画します

サンプルコード

以下のサンプルコードでベジェ曲線を描画します。

from ipycanvas import Canvas

canvas = Canvas(width=200, height=100)

canvas.stroke_style = '#7799dd'

canvas.begin_path()
canvas.move_to(10,50)

# ベジェ曲線
# 制御点1
cp1x = 50
cp1y = 25
# 制御点2
cp2x = 150
cp2y = 90
canvas.bezier_curve_to(cp1x,cp1y, cp2x,cp2y, 190,50)

canvas.stroke()
canvas

〇サンプルコードの実行結果

関連情報

・ipycanvasのインストールは、以下を参照してください。
JupyterLabにipycanvasをインストールして、ノートブックにcanvasを利用して図形を描画する