canvas テキストを表示

HTML

<canvas id="myCanvas" width="300" height="150" class="shadow">canvas要素を表示できません</canvas>

1	<canvas id="myCanvas" width="300" height="150" class="shadow">canvas要素を表示できません</canvas>

Script

jQuery( function ( $ ) {

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	
	ctx.font = "1em Georgia";
	ctx.fillText("canvas要素で文字列を表示します", 10, 50);

	ctx.font = "1em Verdana";

	var gradient = ctx.createLinearGradient(0, 0, c.width, 0);

	gradient.addColorStop("0", "magenta");
	gradient.addColorStop("0.5", "blue");
	gradient.addColorStop("1.0", "red");

	ctx.fillStyle = gradient;
	ctx.fillText("グラデーションテキスト", 10, 90);
});

jQuery( function ( $ ) {

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "1em Georgia";

ctx.fillText("canvas要素で文字列を表示します", 10, 50);

ctx.font = "1em Verdana";

var gradient = ctx.createLinearGradient(0, 0, c.width, 0);

gradient.addColorStop("0", "magenta");

gradient.addColorStop("0.5", "blue");

gradient.addColorStop("1.0", "red");

ctx.fillStyle = gradient;

ctx.fillText("グラデーションテキスト", 10, 90);

});

CSS

canvas{
    background:rgba(236, 240, 241,1.0);
}

canvas{

background:rgba(236, 240, 241,1.0);

}

CSS note

canvas テキストを表示

HTML

Script

CSS

新着記事