キャンバスに文字を表示する
説明
キャンバスに文字を表示するにはmozDrawText()を使います。パラメータに表示したい文字列を指定します。文字は英語だけでなく日本語も表示することができます。Firefox 3独自のメソッドなのでSafari 3やOpera 9ではエラーになり実行されません。
サンプルプログラム
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>キャンバスに文字を表示する</h1>
<form name="aForm" id="aForm" method="get" action="./regist.cgi">
表示文字：<input type="text" size="16" name="aText" id="aText" value="Sample"><br>
<input type="button" value="描画" id="drawCanvasText">
</form>
<canvas id="myCanvas" width="640" height="480">CANVASに対応したブラウザで実行してください</canvas>
</body>
</html>
【スクリプト】
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.fillStyle = "rgba(255,255,0,1)";
context.mozTextStyle = "48pt bold sans serif";
context.translate(100,240);
context.mozDrawText(txt); //
context.restore(); // 以前の状態を復活
}