テキスト描いてTシャツデザインしよう！　～イチからザックリ！HTML5 Canvas！ ep3～

2021.10.30

HTML5 Canvasでテキストを描く！

ブラウザ上でTシャツをデザインしながらHTML5 Canvasのテキスト表示について学んできましょう！

準備をまた書いてみましょう。

イチからザックリ！HTML5 Canvas！ ep1
難しいことは置いといて、魅力的なHTMLの機能「Canvas」をイチからザックリと勉強していきましょう！HTML5 Canvasとは？Webページを構成するHTMLの機能一つで、HTMLとJavaScriptを用いて、絵や...
yomiaki.com
2021.09.30
ブラウザで絵を描こう！　～イチからザックリ！HTML5 Canvas！ ep2～
HTML5 Canvasで絵を描く！ブラウザ上で絵を描きながらHTML5 Canvasを学んできましょう！前回の準備で書いたところまで、また書いてみましょう。rakuten_affiliateId=...
yomiaki.com
2021.10.04
 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex1</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
    
function drawScreen(){
    //ここに図形を描く命令を描く
	
	//白Tシャツ
	
	//プリント
};
    
drawScreen();
</script>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex1</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
    
function drawScreen(){
    //ここに図形を描く命令を描く
	
	//白Tシャツ
	
	//プリント
};
    
drawScreen();
</script>
</body>
</html>

白Tシャツを描く

まずは真っ白なTシャツをパスの機能を使って描いていきましよう。

drawScreen()に以下の命令を加えてみましょう。


//白Tシャツ
context.fillStyle="#FFFFFF"
context.strokeStyle="#000000";
context.lineWidth=5;
context.beginPath();
context.moveTo(200,20);
context.lineTo(20,130);
context.lineTo(50,240);
context.lineTo(130,210);
context.lineTo(120,480);
context.lineTo(380,480);
context.lineTo(370,210);
context.lineTo(450,240);
context.lineTo(480,130);
context.lineTo(300,20);
context.lineTo(200,20);
context.fill();
context.stroke();
context.beginPath();
context.arc(250,20,50,(Math.PI/180)*0,(Math.PI/180)*180,false);
context.fill();
context.stroke();

Tシャツの輪郭を描いた後、ネックのところに半円を描いています。

パスの描き始めの合図
context.beginPath();
描き始めの位置を指定
context.moveTo(描き始めのx座標, y座標);
次に線分を引きたい位置の指定
context.lineTo(次に線分を引きたい位置のx座標, y座標);
閉じたパス内に色を塗る
context.fill();
パスに色をつける
context.stroke();
円のパスを描く
context.arc(円の中心のx座標, y座標, 半径, 円弧の開始の角度(rad), 終了の角度(rad), 反時計回りか時計回りか);

プリントを描く

次にTシャツのプリントを描いていきましょう。

テキストの背景色

drawScreen()に以下の命令を加えてみましょう。


//プリント
context.fillStyle="red";
context.fillRect(145,180,210,50);

これで赤色の長方形がTシャツの胸のあたりに描けたと思います。この長方形の上にテキストを描きます。

塗りつぶす色を指定
context.fillStyle=" 色 ";
単色塗り長方形の位置大きさの指定
context.fillRect(図形左上のx座標, 図形左上のy座標, 図形の幅, 図形の高さ);

テキスト

テキストを描いていきます。

単色塗りテキスト(fillText)

drawScreen()に以下の命令を加えてみましょう。


//プリント
context.font="bold 32px monosoace";
context.fillStyle="#FFFFFF";
context.fillText("Hello World",150,220);
フォントの指定
context.font="スタイル 太さ サイズ 種類";

 

この命令でフォントの指定をします。ここではCSSに準拠したテキスト文字列で記述します。

参考：スタイルシートリファレンス（目的別）

スタイル(font-style)
標準（normal）、イタリック体（italic）、斜体（oblique）
太さ(font-weight)

数値で指定：100、200、300、400、500、600、700、800、900

キーワードで指定：標準の太さ(normal)、一般的な太字(bold)、相対的に一段細く(lighter)、相対的に一段太く(bolder)

サイズ(font-size)

数値で指定：～px、～em、～ex

％で指定：～%

キーワードで指定：xx-small、x-small、small、medium、large、x-large、xx-large

種類(font-family)
sans-serif(ゴシック系のフォント)、serif(明朝系のフォント)、cursive(筆記体・草書体のフォント)、fantasy(装飾的なフォント)、monospace(等幅フォント)
単色塗りのテキストの文字列、位置の指定
context.fillText("文字列",テキストの左上のx座標,テキストの左上のy座標);

 

この命令で描画したい文字列と位置を指定して、テキストを描画することができます。

長方形の上に白色のテキストが描けたと思います。

テキストの輪郭(strokeText)

今度はテキストに縁をつけてみましょう。

drawScreen()を以下のように書き換えてみましょう.


//プリント
context.fillStyle="red";
context.fillRect(145,180,210,50);
context.font="bold 32px monosoace";
context.fillStyle="#FFFFFF";
context.fillText("Hello World",150,220);
context.strokeStyle="black";
context.lineWidth=2;
context.strokeText("Hello World",150,220);
輪郭を描くテキストの文字列、位置の指定
context.strokeText("文字列",テキストの左上のx座標,テキストの左上のy座標);

 

図形の輪郭を描く時と同様にstrokeStyleとlinewidthで色、線の太さを指定した後、この命令で描画したい文字列と位置を指定して、テキストの輪郭を描画することができます。

これでテキストに黒色の縁を描くことができました。

影をつける(shadowColor,shadowOffsetX,shadowOffsetY,shadowBlur)

テキストに黒色の縁をつけたら、なんとなくダサく感じたので、縁は消して代わりに影をつけてみましょう！

drawScreen()のを以下のように書き換えてみましょう.


//プリント
context.fillStyle="red";
context.fillRect(145,180,210,50);	
context.font="bold 32px monosoace";
context.shadowColor="#000000";
context.shadowOffsetX=2;
context.shadowOffsetY=2;
context.shadowBlur=2;
context.fillStyle="#FFFFFF";
context.fillText("Hello World",150,220);
影の色の指定
context.shadowColor=" 色 ";

 

fillStyleやstrokeStyleと同様に影の色を指定します。

影のズレの指定
context.shadowOffsetX=x方向にズラしたい距離(px);

 

影がx方向にどれだけズレるかを指定します。単位はピクセル(px)です。

context.shadowOffsetY=y方向にズラしたい距離(px);

 

影がy方向にどれだけズレるかを指定します。単位はピクセル(px)です。

影のぼかし度合いの指定
context.shadowBlur=ぼかし度合い;

 

影のぼかし度合いを指定します。これを書かなくても影は描画されますが、ボケてはいません。

この処理を適用すると、以降のイメージ全体に影がついてしまうので、


context.shadowOffsetX=0;
context.shadowOffsetY=0;
context.shadowBlur=0;

と影をつけ終わったらリセットしておきましょう。

まとめ

最後に影をつけるところまでの全コードと、扱ったメソッドのまとめを載せておきます。

全コード


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Ex3</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>
<script>
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
    
function drawScreen(){
    //ここに図形を描く命令を描く
    
    //白Tシャツ
    context.fillStyle="#FFFFFF"
    context.strokeStyle="#000000";
    context.lineWidth=5;
    context.beginPath();
    context.moveTo(200,20);
    context.lineTo(20,130);
    context.lineTo(50,240);
    context.lineTo(130,210);
    context.lineTo(120,480);
    context.lineTo(380,480);
    context.lineTo(370,210);
    context.lineTo(450,240);
    context.lineTo(480,130);
    context.lineTo(300,20);
    context.lineTo(200,20);
    context.fill();
    context.stroke();
    context.beginPath();
    context.arc(250,20,50,(Math.PI/180)*0,(Math.PI/180)*180,false);
    context.fill();
    context.stroke();
    
    //プリント
    context.fillStyle="red";
    context.fillRect(145,180,210,50);
    context.font="bold 32px monosoace";
    context.shadowColor="#000000";
    context.shadowOffsetX=2;
    context.shadowOffsetY=2;
    context.shadowBlur=2;
    context.fillStyle="#FFFFFF";
    context.fillText("Hello World",150,220);

};

drawScreen();
</script>
</body>
</html>

扱ったメソッドまとめ

フォントの指定
context.font="スタイル 太さ サイズ 種類";
単色塗りのテキストの文字列、位置の指定
context.fillText("文字列",テキストの左上のx座標,テキストの左上のy座標);
影の色の指定
context.shadowColor=" 色 ";
影のズレの指定
context.shadowOffsetX=x方向にズラしたい距離(px);
context.shadowOffsetY=y方向にズラしたい距離(px);
影のぼかし度合いの指定
context.shadowBlur=ぼかし度合い;

ぜひこれらの方法でいろいろなものを描いてみてください！

次はアニメーションを紹介していきたいですね。

コメント

タイトルとURLをコピーしました