Headlines News :
Home » , » Gradient Teks HTML5 Canvas dan Javascript

Gradient Teks HTML5 Canvas dan Javascript

Cyber4rt | 29 May 2012 | 2:27 PM

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("Cyber4rt.com", 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("Cyber4rt Blog", 0, 50);
</script>

3. Text Linear Gradient Diagonal





Source 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("acizninja", 0, 150);
</script>

Demikianlah tips Cara Membuat Text Gradient dengan HTML 5 Canvas dan Javascript , semoga bermanfaat.

Special thanks to Hendro Prayitno a.k.a Amdhas
Share this article :
 
█║▌│█│║▌║││█║▌│║▌║█║║▌
Cyber4rt © 2015 | Some Rights Reserved
ABOUTCONTACTDISCLAIMERPRIVACY POLICYSITEMAPTERMS
Powered by Blogger