Canvas、文字がぼやけるときの対処法。

       
  •  

  • カテゴリー: JavaScript
 この記事は約2分で読めます。
 
Canvasでテキストを扱うときに
テキストがぼやけてしまうことがあります。
高画質でテキストを表示させる方法を書いていきます。

HTMLのタグ内でサイズを指定!

テキスト等がぼやけるのを防ぐために
CSSでCanvas指定してたサイズよりも
大きいサイズをHTMLで指定します。

  <style>
  #aaa{
width:400px;
      height:500px;
     background-color:gray;
  }
  </style>

もしもCanvasのidが「aaa」として
サイズを仮に400px,500pxとします。
  <canvas id=“aaa” width=800px height=1000px></canvas>

そしてHTML内で
CSSで指定したサイズより大きなサイズを指定します。
こうすることで実際の表示されるサイズは
CSSで定義した大きさとなり、
Canvasの中ではHTMLとして指定したサイズとなります。

注意点が一つあります。
この方法を使用すると
Canvasで指定した図形や文字サイズ、
XとYの位置が大きくずれます。
なのでこれを行う前に注意が必要ですね!





 
<style>
  #aaa{
width:400px;
      height:500px;
     background-color:gray;
  }
  </style>
  <canvas id=“aaa”></canvas>

  <script>
   var canvas1 = document.getElementById(‘aaa’);
   var context = canvas1.getContext(‘2d’);

context.font= ’20px sans-serif’;
   context.textAlign = ‘center’;
   context.fillStyle =‘blue’;
   context.fillText(“ぼやかさない方法”, 200, 100);
  </script>

</body>
</html>

では仮にこう書きます。
すると
boke.jpg
このように文字がぼけてしまいあまり見た目が良くないですね。
そんな時に
<canvas id=“aaa” width=800px height=1000px></canvas>

HTMLでcssで指定したサイズより大きく指定します。
そして文字などの大きさをそれに応じて変えます。
すると
iikanzi.jpg
こんなにも見た目が変わります!
とてもきれいになりました!!
まとめ

何気なく使ってみると画質が落ちてがっかりですよね。
この方法を使えば文字や図形などもぼやけずに
描画できてとても素敵ですね!

質問箱というサービスでもこの方法を使ってますね
お役に立てたら幸いです!






 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …

JavaScript
classとidの取得する値が違ってエラーと対処法。JavaScript

JavaScriptである処理をしようとしていたのですが、 idでは出来てclassやNameではエ …

JavaScript
Javascript、配列からランダムに取り出し重複させない書き方『超強引かつ分かり易い』

 皆さんこんにちは!はせです。JavaScriptを今開発で使っているのですが、配列からラ …