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

発展途上のCANVAS

ものづくり筆耕ブログ

きれいな表示

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

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




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

サンプル例

[html]
<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>
[/html]

動作結果



あいうえお



さいごに

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