Gradient Text dengan HTML5 & Javascript

Gradient Text dengan HTML5 canvas dan Javascript

Setelah sekian lama vakum ngeblog, kali ini Syndicate OS akan me-repost postingan dari blog mas Hendro yang dihapus pihak blogger, berhubung saya tidak ada inspirasi untuk posting, jadi saya "jiplak" saja postingannya, piis mas Hendro ^_^ v

Baiklah langsung saja ke topik permasalahannya, tips ini akan membahas bagaimana Cara Membuat Text Gradient dengan HTML 5 Canvas dan Javascript , mari kita mulai ! :)

1. Text Linear Gradient Vertical

Code untuk tulisan di atas yaitu :

<canvas height="70" id="bayangan" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bayangan');
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 Impact";
ctx.shadowColor = "red";
ctx.fillStyle = g;
ctx.fillText("Syndicate OS", 0, 50);
</script>

code di atas dapat sobat sesuaikan dengan keinginan sobat :)
Ok kita lanjut Membuat Text Gradient dengan HTML 5 Canvas dan Javascript dengan model yang berbeda

2. Text Linear Gradient Horizontal

Code yang saya gunakan yaitu :

<canvas height="90" id="bayangany" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bayangany');
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 45px Georgia";
ctx.shadowColor = "red";
ctx.fillStyle = g;
ctx.fillText("Blogazine", 0, 50);
</script>

3. Text Linear Gradient Diagonal

Souce Code :

<canvas height="100" id="gd" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('gd');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 400, 100);
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, '#f03');
  g.addColorStop(1, '#eee');
ctx.font = "bold 40px Comic Sans MS";
ctx.fillStyle = g;
ctx.fillText("Saya bukan Hacker!", 0, 50);
</script>

4. Linear Gradient Text-Shadow Blur

Source Code :

<canvas height="100" id="y" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('y');
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("Kopi tubruk enak nih gan!", 0, 50);
</script>

5. Linear Gradient Text Rotate

Source Code :

<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 50px Georgia";
ctx.shadowColor = "rgb(190, 190, 190)";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.fillStyle = g;
ctx.rotate(-0.25);
ctx.fillText("Blog + Magazine", 0, 150);
</script>

Demikianlah tips Cara Membuat Text Gradient dengan HTML 5 Canvas dan Javascript dari saya semoga bermanfaat, jika ada yang perlu ditanyakan,silahkan tanyakan melalui komentar di bawah ini :)