とほほのCanvasライブラリ

とほほのCanvasライブラリ(TwnCanvas)
ドキュメント

とほほのCanvasライブラリ(TwnCanvas)

HTML5 Canvas の beginPath() とか stroke() とかがちょっと面倒なので、Canvas をサクッと使える簡易ライブラリ(TwnCanvas) を一部機能のみですが作ってみました。

twn-canvas-1.0.0.js

下記のような感じで利用できます。

<script src="./lib/twn-canvas-1.0.0.js"></script>
<canvas id="cv1" width="800" height="300"></canvas>
<script>
var x = y = 100;
var w = h = 80;
var cv = new TwnCanvas("cv1")
cv.setOffset(30, 30)
  .setColor('#669')
  .setFont('14px Consolas')
  .setLineWidth(3)
  .setDash([])
  .setBgColor('transparent')
  .box(x*0, y*0, w, h)
  .box(x*1, y*0, w, h, {color:'#060', lineWidth:2, bgColor:'#cfc', dash:[2, 4], text:'Box'})
  .circle(x*2+w/2, y*0+h/2, w/2)
  .circle(x*3+w/2, y*0+h/2, w/2, {color:'#060', lineWidth:2, bgColor:'#cfc', dash:[2, 4], text:'Circle'})
  .ellipse(x*4+w/2, y*0+h/2, w/2, w/4)
  .ellipse(x*5+w/2, y*0+h/2, w/2, w/4, {color:'#060', lineWidth:2, bgColor:'#cfc', dash:[2, 4], text:'Ellipse'})
  .line(x*0, y, w, h)
  .line(x*1, y, w, h, {color:'#060', lineWidth:2, dash:[2, 4], text:'Line', top:12})
  .arrow(x*2, y, w, h)
  .arrow(x*3, y, w, h, {color:'#060', lineWidth:2, dash:[2, 4], text:'Arrow', top:12})
  .path([x*4, y, x*4+w/2, y+h/2, x*4, y+h, x*4+w, y+h])
  .path([x*5, y, x*5+w/2, y+h/2, x*5, y+h, x*5+w, y+h], {color:'#060', lineWidth:2, dash:[2, 4], text:'Path', top:8, left:20})
  .text('Text', x*0, y*2+h/2)
  .text('Text', x*1, y*2+h/2, {color:'#060', font:'20pt "Times New Roman"'})
  .image('../image/ki2.gif', x*2, y*2)
  .image('../image/ki2.gif', x*3, y*2, w/2, h/2)
</script>

ドキュメント

コンストラクタ

new TwnCanvas(id): TWNキャンバスオブジェクトを作成します。id には Canvas の ID を指定します。

デフォルト値設定

setOffset(x, y): 全体のオフセット位置を指定します。初期値は 0, 0 です。
setColor(color): デフォルトの色(ライン色、テキスト色)を指定します。初期値は '#00' です。
setFont(font): フォントを指定します。初期値は '8pt Consolas' です。スペースを含むフォントを使用する場合は '24pt "Times New Roman"' の様に指定してください。
setLineWidth(lineWidth): デフォルトの線の太さを指定します。初期値は 1 です。
setDash(dash): デフォルトの破線タイプを指定します。初期値は [] です。詳細は setLineDash() を参照してください。
setBgColor(bgColor): デフォルトの背景色を指定します。初期値は 'transparent' です。
getStyle(): デフォルト値を取得します。

描画

box(x, y, width, height, param={}): 矩形を描画します。x, y で開始位置、width, height で横幅と高さを指定します。
circle(x, y, r, param={}): 円を描画します。x, y で中央位置、r で半径を指定します。
ellipse(x, y, rx, ry, param={}): 円を描画します。x, y で中央位置、rx, ry でX方向、Y方向の半径を指定します。
line(x1, y1, dx, dy, param={}): 線を描画します。x, y で開始位置、dx, dy で終了位置との距離を指定します。
arrow(x1, y1, dx, dy, param={}): 矢印を描画します。x, y で開始位置、dx, dy で終了位置との距離を指定します。
path([x1, y1, x2, y2...], param={}): 連続的な線を描画します。x1, y1 で開始位置、x2, y2... で次の停止位置を指定していきます。
text(text, x, y, param={}): テキストを描画します。x, y で開始位置を指定します。
image(image, x, y, [width, height], param={}): 画像を描画します。x, y で開始位置、width, height で横幅と高さを指定します。width, height を省略すると画像自身の大きさで表示します。

パラメータ

color: 線やテキストの色を指定します。
lineWidth: 線の太さを指定します。
bgColor: 背景色を指定します。
dash: 破線を指定します。
text: テキストを指定します。box(), circle(), ellipse() の場合は中央に描画します。line(), arrow() の場合は始点と祝言の中央、path()の場合は最初の始点と終点の中央に表示します。
font: フォントを指定します。
top: テキストの上端からの位置を指定します。text(), image() 以外で使用します。
left: テキストの左端からの位置を指定します。text(), image() 以外で使用します。

初版:2024年1月14日最終更新:2024年1月14日

https://www.tohoho-web.com/tech/twn-canvas.html