18 Temmuz 2016 Pazartesi
HTML5 CANVAS OPACİTY(SAYDAMLIK) SAVE VE RESTORE KOMUTLARI
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:1px solid #d3d3d3;
/* background-color: #000;*/
canvas {
cursor:none;
}
}
</style>
<script>
window.onload = function () {
benimtuval=document.getElementById("mycanvas");
ctx=benimtuval.getContext("2d");
pozx=180;
pozy=180
vx=-10;
vy=-10;
function eylem(){
ctx.clearRect(0,0,600,400);
ctx.fillStyle="red";
ctx.fillRect(0,0,200,200);
ctx.save();/*öncekileri(3kodu) kaydeder.*/
ctx.globalAlpha=0.51;/*nesneleri saydamlaştırıyor.*/
ctx.fillStyle="blue";
ctx.fillRect(pozx,pozy,200,200);
pozx+=vx;
pozy+=vy;
ctx.restore();/*önceki(kaydedilen) ayarları tekrar uygula*/
}
setInterval(eylem,50);
}
</script>
</head>
<body>
<img id="resim" src="bebek.png" style="display:none"/>
<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