캔버스 요소의 텍스트 문자 사이를 확장

이 텍스트를 펼쳐주고 싶다.

CSS의 letter-spacing을 맞추다

캔버스 요소에 letter-spacing을 적용하면
canvas로 그려진 텍스트에도 적응


이런 느낌으로 퍼져 줍니다.

letter-spacing에 애니메이션 적용하기

CSS Animation에서 letter-spacing 속성을 만지면 움직입니다.
용도가 꽤 한정된다고 생각합니다만…



또한 js 측에서 font를 지정해주고 캔버스를 매번 업데이트하지 않으면 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の描画を更新も
}

솔직히 쓸모가 없다고 생각합니다만, 조금 재미 있었기 때문에 기사를 써 보았습니다.