日別アーカイブ: 2017-03-25

発展途上のCANVAS

きれいな表示

canvasはHTML5でサポートされた図形を描く時の描画仕様です。最近、設定された歴史が浅い規格だからか、漢字がきれいに表示されません。

動的な表現は、CANVASでしかできないと思っていましたが、従来からのdivタグやspanタグでもメッセージや画像データを動的に切り替えられるので動的表現は可能です。



CANVASでのテキスト表示はきれいとは言いがたいです。CANVASで動的にテキストを変更するやり方をマスターできたので、最近はdocument.getElementById(“div2”).innerHTMLのような使い方をしています。

サンプル例

<html>
<body onLoad="starting();">
<canvas id="canv" width="580" height="80" style="border: 1px blue solid"></canvas>
<div id="dv2" style="width:580; height:80; font-family:sans-serif; font-size:28px; color: red; border: 1px red solid">
あいうえお
</div>
</body>
<script type="text/javascript">
const TTL10 = "とりたて産直野菜、うまさ安さ一挙両得";
var ctx;                                             // コンテキスト
function starting(){
  document.getElementById("dv2").innerHTML = TTL10;  // メッセージを変更
  var canvas = document.getElementById('canv');      // canvasの要素を取得する
  if(canvas.getContext){                             // canvasオブジェクト
    ctx = canvas.getContext('2d');                   // canvasのコンテキスト
    ctx.font = "normal 28px sans-serif";             // テキストのフォント
    ctx.fillStyle = "orange";                        // メッセージの色
    ctx.fillText(TTL10, 0, 30);                      // メッセージを出力
  }
}
</script>
</html>

動作結果

あいうえお

さいごに

両者を比較するとDIV要素で表示したテキストが鮮明です。これだけの例では差は少ないですがもっと、顕著です。これからは図形はCANVAS、テキストはなるべくDIV,SPANを使っていきたいと考えています。