Help us understand the problem. What is going on with this article?

canvas要素のテキストの文字間を広げる

More than 3 years have passed since last update.

スクリーンショット 2016-09-05 13.44.19.png
このテキストを広げてあげたい。

CSSのletter-spacingを当ててあげる

canvas要素にletter-spacingを当ててあげると
canvasで描画されたテキストにも適応される

スクリーンショット 2016-09-05 13.44.06.png
こんな感じに広がってくれます。

letter-spacingにアニメーションを当ててみる

CSS Animationでletter-spacingプロパティをいじってあげると動きます。
用途がかなり限られると思いますが…

dot_bbj.gif

また、js側でfontを指定してあげるのとcanvasを都度更新してあげないとCSS Animationは適応されませんでした…

function render(){
  stage.clear();
  c.textAlign = 'center';
  c.font = '24px "Fjalla One"'; // <= フォントの指定をしてあげないとCSS Animationが効きませんでした。
  c.fillStyle = '#59bb0c';
  c.fillText('HELLO Qiita',200,00);
  rendering = requestAnimationFrame(render);// あとcanvasの描画を更新も
}

正直使いどころがないと思いますが、ちょっと面白かったので記事を書いてみました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away