[目次]
Canvas でテキスト | Webプログラミング!(2021年度)
Canvasにテキスト
サンプル1
サンプル1index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Canvasのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
window.onload = function (){
var c=document.querySelector('#canvas-id1');
paintCanvas(c); // defined in external JavaScript file
}
</script>
</head>
<body>
<h1>Canvasのテスト</h1>
<canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>
paintcanvas.js
function paintCanvas(c){
var ct=c.getContext('2d'); // 決まり文句
var message="文字列表示のテスト"; // 文字列変数を定義
for(var j=0;j<5;j++){
quadrangle(j*10,j*30+10,2);
}
// フォントの スタイル 太さ サイズ 種類
// style weight size family
// style: normal, italic, oblique,..
// weight: normal, bold
// size:
// family: serif, sans-serif, cursive, fantasy, monospace
// ct.font = "italic bold 30px sanserif";
ct.fillText(message, 50,100); // テキストを表示
function quadrangle(x,y,scale){
var pts=[[20,20],[50,30],[30,10]]; //配列の宣言と定義
// 色の指定
ct.strokeStyle="#FF9999"; // 線の色
// ct.strokeStyle="blue"; // 線の色
ct.fillStyle="rgba(0,0,255,0.25)"; // 塗りの色
ct.beginPath(); // Path を開始
ct.moveTo(x,y) ;
for(var i=0; i<pts.length; i++){
ct.lineTo(x+pts[i][0]*scale,y+pts[i][1]*scale); // 配列の要素
}
// ct.closePath(); // Path の始点につなぐ
ct.stroke(); // 線を描く
ct.fill(); // 塗る
}
}
// TODO: HTML FORM との連携
