18 Temmuz 2016 Pazartesi
HTML5 CANVAS CANVAS FİLL TEXT ÖZELLİĞİ (GÜZEL BİR YAZI ÖRNEĞİ YAPTIK)
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
myvalue = 0.1;
vx = 0.1;
function eylem() {
if(myvalue>0.9)
{
vx-=0.1;
}
if(myvalue<0.1)
{
vx+=0.1;
}
ctx.fillStyle="black";
ctx.fillRect(0,0,600,400);
ctx.fillStyle="lightblue"
for(var a=0;a<50;a++){
ctx.fillRect(600*Math.random(),400*Math.random(),2,2);
}
ctx.font = "italic bold 40pt Arial";
var grad = ctx.createLinearGradient(100, 150, 400, 0);/*yazının konumunu gradientin başlangıcına verdik.*/
grad.addColorStop(0, "blue");
grad.addColorStop(myvalue, "red");
grad.addColorStop(1, "blue");
ctx.shadowColor = "yellow";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 5;
ctx.fillStyle = grad;
ctx.fillText("Ramazan Aras", 100, 150);/*100 150 konumunu belirledik*/
myvalue += vx;
}
setInterval(eylem, 100);
}
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
Kaydol:
Kayıt Yorumları (Atom)
Hiç yorum yok:
Yorum Gönder