Gradient Text HTML5 Canvas & JavaScript

Berikut ini adalah contoh HTML5 Canvas dengan variasi JavaScript seperti terlihat pada header di blog ini:

1. Text Linier Gradient Vertical



Berikut Source-Code dari gambar diatas  :

<canvas height="70" id="root" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('root');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 0, 50);
g.addColorStop(0,'red');
g.addColorStop(.7,'green');
g.addColorStop(.3,'blue');
g.addColorStop(1,'yellow');
ctx.font = "bold 50px georgia";
ctx.shadowColor = "red";
ctx.fillStyle = g;
ctx.fillText("Welcome In", 0, 50);
</script>

 2. Text Linier Gradient Horizontal



Berikut Source-Code dari gambar diatas :

<canvas height="90" id="4r1e" width="480"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('4r1e');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 400, 0);
g.addColorStop(0, '#000');
  g.addColorStop(1 / 8, '#00f');
  g.addColorStop(2 / 8, '#0f0');
  g.addColorStop(3 / 8, '#0ff');
  g.addColorStop(4 / 8, '#f00');
  g.addColorStop(5 / 8, '#f0f');
  g.addColorStop(6 / 8, '#ff0');
  g.addColorStop(7 / 8, '#fe0');
  g.addColorStop(1, '#f8f');
ctx.font = "bold 30px comic sans ms";
ctx.shadowColor = "red";
ctx.fillStyle = g;
ctx.fillText("Catatan-Ariansyah.blogspot.com", 0, 50);
</script>

3. Linier Gradient Text-Shadow Blur


Berikut Source-Code dari gambar diatas :

<canvas height="100" id="4rie" width="600"></canvas><script type="text/javascript">
var canvas = document.getElementById('4rie');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 200);
g.addColorStop(0, '#FF0000');
g.addColorStop(.6, '#BF3EFF');
g.addColorStop(1, '#FFD700');
g.addColorStop(.5, '#F5F5F5');
ctx.font = "bold 40px Georgia";
ctx.shadowColor = "#FF3030";
ctx.shadowBlur = 20;
ctx.fillStyle = g;
ctx.fillText("Lagi Ngapain Gan?", 0, 50)
</script>

4. Linier Gradient Text Rotate


Berikut Source-Code dari gambar diatas :

<canvas height="150" id="shadowx" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('shadowx');
var ctx = canvas.getContext('2d');
var g = ctx.createRadialGradient(200, 150, 20, 200, 150, 150);
g.addColorStop(0, '#FF0000');
g.addColorStop(.6, '#FFFF00');
g.addColorStop(1, '#B0E2FF');
g.addColorStop(.5, '#F5F5F5');
ctx.font = "bold 30px comic sans ms";
ctx.shadowColor = "rgb(190, 190, 190)";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.fillStyle = g;
ctx.rotate(-0.25);
ctx.fillText("acizninja|cyber4rt.com", 0, 150);
</script>

Silahkan di sesuaikan sendiri, Ente juga bisa merubah tulisan, warna, ukuran, dan lainnya..

Hendro Prayitno a.k.a Amdhas  | Cyber4rt.com,-  For Artikle Share