18 Temmuz 2016 Pazartesi
HTML5 CANVAS DRAW İMAGE ÖZELLİĞİ İLE ARI HAREKET ETTİRDİK
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:1px solid #d3d3d3;
/* background-color: #000;*/
canvas {
cursor:none;
}
}
</style>
<script>
window.onload = function () {
}
function eylem(e){
benimtuval=document.getElementById("mycanvas");
ctx=benimtuval.getContext("2d");
resim=document.getElementById("resim");
ctx.clearRect(0,0,benimtuval.width,benimtuval.height);
/*ilk 4 ü resim için sonraki 4 canvas için*/
// ctx.drawImage(resim,100,100,100,100,0,0,50,50);/*resimin içdeki konumu ilk iki parametre,sonraki iki genişlik yükseklik,sonraki 4 ise canvasın konum ve genişliği*/
ctx.drawImage(resim,50,100,resim.width,resim.height,e.layerX,e.layerY,benimtuval.width/6,benimtuval.height/6);
// ctx(resim,x,y,image.width,image.height,x,y,canvas.width,canvas.height);
}
</script>
</head>
<body>
<img id="resim" src="ari.png" style="display:none"/>
<canvas id="mycanvas" onmousemove="eylem(event)" 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