web関連

【HTML5・javascript】canvas使ってアイキャッチ画像作ってみた

2019/10/04

2019/10/15

/

【HTML5・javascript】canvas使ってアイキャッチ画像作ってみた

毎回photoshopでアイキャッチ作るの面倒なのでcanvas使って何とかならないか調べた時の備忘録

HTMLの記述

<canvas id="cv"></canvas>

 

javascriptの記述

<script>
// canvasで使用する画像を読み込む
var img = new Image();
img.src = "https://twotone.me/wp-content/uploads/2019/10/logo_js.png";

// 全て読み込まれた後で読み込む
window.onload = function() {
	canvas = document.getElementById('cv');
	canvas.width = 800 ;// 幅指定
	canvas.height = 425 ;// 高さ指定
	// canvasタグに描画するのに必要
	ctx = canvas.getContext('2d');
	// canvasとgetContext()メソッドが使えるかどうか判定(エラー回避用)
	if (!canvas || !ctx) {
	return;
	}

	// 背景塗る
	ctx.fillStyle = '#fdd735';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// 画像の中央寄せ
	var img_x = (canvas.width - img.width) / 2;
	var img_y = (canvas.height - img.height) / 2 - (img.height / 2);
	//画像を描画する
	ctx.drawImage(img, img_x, img_y);

	// テキスト代入
	var text = "テキストが入ります" ;
	// テキストのstyle調整
	ctx.lineWidth = 2;
	ctx.fillStyle = "#000";
	ctx.font = "bold 32px Roboto, Noto Sans JP, sans-serif";
	// テキストのx軸の真ん中寄せ
	var t_size = ctx.measureText( text ) ;// テキストの幅を知る為だけの記述
	var text_x = (canvas.width - t_size.width) / 2;
	var text_y = (canvas.height - 70);//下から70pxの位置指定
	// テキストの出力
	ctx.fillText(text, text_x, text_y);

	// 乗算(テキストの後ろにラインマーカー入れるため)
	ctx.globalCompositeOperation = "multiply";

	// テキストの背景にラインマーカー
	ctx.fillStyle = '#fdd734';
	var border_w = (t_size.width + 20);
	var border_x = (canvas.width - border_w) / 2;
	var border_y = (canvas.height - 75);
	ctx.fillRect(border_x, border_y, border_w, 15);
}
</script>

かなり粗い感じのコードになったけどとりあえず出力できた
以下、実際に出力してみた

 

実際にcanvasで描画してみた


IE以外では表示が上手くいっているハズ

IEはcssもそうなんだけど「乗算」とか対応してないんすよね
描画の順番変えるだけで表示でしっかり表示できるようになるけど疲れたのでまた今後
 

ゆくゆくはcanvasで作った画像をディレクトリに保存してOGP画像とかで運用したい
表側のアイキャッチ表示は画像じゃなくてcssでやりたいかな…簡単に色とか変えられてメンテナンス簡単だし