Java Web Uygulamalarinda Canvas
- Sevdanur GENC
- Jun 23, 2013
- 1 min read
Html5 Canvas uygulamalarinin web sayfalarinizda grafik cizimleri icin kullanabileceginizi biliyorsunuzdur. Canvas cizimlerinizi <canvas > </canvas> taglari arasinda kullanarak gerceklestirebilirsiniz. Bununla birlikte size javaScript'te yardim olacaktir. Peki bunu jsf, jsp gibi java web application'larinizda nasil kullanacaksiniz basit bir ornekle gosterelim.
Oncelikle Ide'nizde index.jsp isminde bir java web application olusturuyorsunuz ve ardindan kodlarinizi asagidaki gibi yaziyorsunuz. Burada dikkat etmeniz gereken nokta su; input 'lardan gelen degerleri id'ler ile buton icerisindeki javaScript fonksiyonumuza gonderiyoruz. JavaScript Fonksiyonumuz icerisinde ise Canvas kullanilarak nasil bir RECT cizecegimize dair kodlari adim adim yazmis oluyoruz. Sonrasinda ise canvas tag'lari arasinda yazmis oldugumuz fonksiyonu id'si ile birlikte cagirmis oluyoruz.
Index.Jsp Kaynak Kodlari;
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="text" name="verial1" value="50" id="verial1" />
<input type="text" name="verial2" value="50" id="verial2" />
<input type="text" name="verial3" value="200" id="verial3" />
<input type="text" name="verial4" value="200" id="verial4" />
<input type="text" name="verial5" value="100" id="verial5" />
<button
onclick="myFunction(verial1.value ,verial2.value, verial3.value,verial4.value,verial5.value)">
Try it</button>
<script>
function myFunction(deger1,deger2,deger3,deger4,deger5)
{
canvas = document.getElementById("karecizdir") ;
context = canvas.getContext("2d");
context.beginPath();
context.strokeRect(deger1,deger2,deger3,deger4);
context.strokeStyle = deger5;
context.stroke();
context.stroke();
return;
}
</script>
<canvas width="600px" height="600px" id="karecizdir"></canvas>
</body>
</html>
Ekran Goruntusu;
Keyifli Calismalar Dilerim.
Comments