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">4. Linier Gradient Text Rotate
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>
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..
Thanks To :
Hendro Prayitno a.k.a Amdhas | Cyber4rt.com,- For Artikle Share
0 komentar:
Post a Comment
Silahkan berikan komentar anda yang baik.