CSS note

HTML

<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);
});

CSS

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

新着記事