キャンバスにアウトライン文字を表示する
説明
キャンバスにアウトライン文字を表示するにはmozPathText()を使います。パラメータに表示したい文字列を指定します。文字は英語だけでなく日本語も表示することができます。ただし、このままでは文字のパスが生成されるだけなのでキャンバスには描画されません。このため、描画するためのメソッドであるstroke()を呼び出します。また、mozPathText()はFirefox 3独自のメソッドなのでSafari 3やOpera 9ではエラーになり実行されません。
サンプルプログラム
window.onload = function(){
document.getElementById("drawCanvasText").onclick = function(){
var txt = document.getElementById("aText").value;
textDraw(txt);
}
initCanvas();
}
function initCanvas(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0,0,255,1)"; // 青色にする
context.fillRect(0,0,640,480); // 塗りつぶす
}
function textDraw(txt){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.save(); // 現在の状態を保存
context.strokeStyle = "rgba(255,255,0,1)";
context.mozTextStyle = "90pt bold sans serif";
context.translate(100,240);
context.mozPathText(txt); // 文字のアウトラインをパスとして生成
context.lineWidth = 2;
context.stroke();
context.restore(); // 以前の状態を復活
}