HTML
1 |
<canvas id="myCanvas" width="300" height="150" class="shadow">canvas要素を表示できません</canvas> |
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
1 2 3 |
canvas{ background:rgba(236, 240, 241,1.0); } |