search
LoginSignup
4

More than 1 year has passed since last update.

posted at

updated at

HTML/Canvasでオラオラオラオラ無駄無駄無駄無駄のフキダシを作る

この記事は Web グラフィックス Advent Calendar 2020 の18日目の記事です。

はじめに

筆者は趣味でベクター系のお絵描きツールを作っています。いずれ文字入れやフキダシの機能を入れたいと思っていまして、今回の記事ではCanvasで文字とフキダシの描画を実装してみたものを紹介します。

実行結果

やっていること

あまり理論的に高度な内容はありませんが、以下のようになります。

①角丸矩形の頂点位置を計算
①角丸矩形の頂点位置を計算

②等間隔に分割したストロークの頂点を計算
②等間隔に分割したストロークの頂点を計算

今回はあまり意味はありませんが、こうすることで後の色々な処理がやりやすくなります。もっと複雑な形状に対応するには必要になることもあるはずです。

③波線フキダシの頂点位置を計算
Image6.jpg

下のような感じでa、b1、b2をランダムに決めてベジエ曲線を計算するという処理をストロークに対して時計回りで繰り返しています。b2を次の繰り返しのb1として使うことで、連続した波線になります。
Image5.jpg

④文字の厳密な寸法の計測
canvasにはgetImageDataというメソッドがあり、canvasのピクセルデータを取得できます。これを利用して、実際に描画されるフォントの寸法をピクセル単位で計測します。
measureTextというメソッドもあるのですが、ピクセル単位で縦横の寸法を取ることはできないようです。

Image7.jpg

⑤文字の描画
ひたすら描画します。

Image9.jpg

実は原作ではやってないみたいですが、フキダシをはみ出す表現もやってみました。


context.globalCompositeOperation  = 'source-atop'

globalCompositeOperationでアルファ値が無い部分の描画がされないようにしています。
他のフキダシと被ると描画されてしまうのが問題ですけど・・・

Image8.jpg

動くもの

See the Pen OraMudaFukidashi by 柏崎ワロタロ (@warotarock) on CodePen.

終わりに

今回はCanvasでフキダシを描画してみました。ルビを入れたところがちょっとこだわりでした!

それでは皆様よいお年を・・・(二回目)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4