26-04-2014 Saat: 17:10
Size html5 ile kodlanmış basit paint kodlarını vereceğim.
Resimler ;
Kod ;
- Bana ait değildir.
Resimler ;
Kod ;
Kod:
<style type="text/css">
div#paint
{
position: relative;
width: 800px;
height: 400px;
border: 1px solid gray;
}
#canvas2
{
position: absolute;
left: 0px;
top: 0px;
}
div#arac
{
position: absolute;
top: 0px;
right: -32px;
background-color: #d6d6d6;
width: 30px;
height: 402px;
text-align: center;
}
div#arac img
{
margin-top: 5px;
}
div#arac #maske
{
width:30px;
height:30px;
position:absolute;
background-color:crimson;
opacity:0.6;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var canvas1, canvas2, paint;
var ctx1, ctx2;
var sx, sy, ex, ey;
var durum = false;
/*canvas üzerinde mousedown olayının gerçekleştiğini tespit edebilmek için durum değişkenini kullanacağız*/
var maske;
var arac = "line";
/*kullanıcı canvas üzerine çizim yapmak için “line,rect,ellipse” araçlarından birisini kullanabilir.Sayfa yüklendiğinde varsayılan araç “line” aracıdır*/
var init = function () {
paint = document.querySelector("div#paint");
canvas1 = document.getElementsByTagName("canvas")[0];
ctx1 = canvas1.getContext("2d");
canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
canvas2.id = "canvas2";
canvas2.width = canvas1.width;
canvas2.height = canvas1.height;
paint.appendChild(canvas2);
/*canvas2 adıyla yeni bir canvas elemanı(Buffer canvas) oluş
turuldu ve paint referanslı elemanının içerisine appendChild()metoduyla eklendi*/
canvas2.addEventListener("mousedown", mDown, false);
canvas2.addEventListener("mousemove", mMove, false);
canvas2.addEventListener("mouseup", mUp, false);
document.getElementsByTagName("img")[0].addEventListener("click", tool, false);
document.getElementsByTagName("img")[1].addEventListener("click", tool, false);
document.getElementsByTagName("img")[2].addEventListener("click", tool, false);
document.getElementsByTagName("img")[3].addEventListener("click", tool, false);
maske = document.getElementById("maske");
}
var mDown = function (event) {
durum = true;
/* Kullanıcının çizim işlemine başlaması ve devam etmesi için mousedown olayının gerçekleşmesi/gerçekleşiyor olması gerekir.mousedown olayının oluştuğunu durum değişkeni ile anlayacağız */
var evt = event || window.event;
sx = evt.clientX - paint.offsetLeft;
sy = evt.clientY - paint.offsetTop;
/*canvas elemanı üzerinde mousedown olayı gerçekleştiğinde mouse işaretçisinin bulunduğu pozisyon bilgisini elde ettik */
}
var mMove = function (event) {
/*Eğer mousedown olayından sonra tuşu basılı tutup fareyi hareket ettirirsek
Bu durumda seçilen araca göre canvas üzerine çizim işlemi gerçekleştirilir.Çizim işlemi canvas2 elemanı(buffer canvas) üzerine yapılmaktadır.*/
if (durum) {
var evt = event || window.event;
ex = evt.clientX - paint.offsetLeft;
ey = evt.clientY - paint.offsetTop;
/*Her mousemove olayında fare işaretçisinin konumu tekrar tespit ediliyor.*/
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
/*Aşağıdaki araçlar her mousemove olayında çalışır. Bu durumda Örneğin bir dikdörtgen çizeceksiniz,Mouse’u her hareket ettirdiğinizde canvas üzerine sol üst köşesi sabit(sx,sy) yeni bir dikdörtgen çizilir.İşte bu durumun önüne geçmek ve sadece mouse tuşuna bastığınız nokta ile mouse tuşunu bıraktığınız nokta arasında bir dikdörtgen çizmek için yukarıdaki clearRect() metodunun her mousemove olayı gerçekleştiğinde çalışması gerekir.Aslında bu metot buffer canvas elemanını her mousemove olayında temizler. */
switch (arac) {
case "line":
ctx2.beginPath();
ctx2.moveTo(sx, sy);
ctx2.lineTo(ex, ey);
ctx2.stroke();
break;
case "rect":
ctx2.fillStyle = "khaki";
ctx2.fillRect(sx, sy, ex - sx, ey - sy);
break;
case "ellipse":
ctx2.beginPath();
ctx2.arc(sx, sy, Math.abs(sx - ex), 0, 2 * Math.PI, true);
ctx2.fillStyle = "green";
ctx2.fill();
break;
}
}
}
var mUp = function (event) {
durum = false;
ctx1.drawImage(canvas2, 0, 0);
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
/*Mouse tuşunu serbest bıraktığınızda yani mouseup olayı gerçekleştiğinde ; drawImage() metoduyla ctx2 içerisinde oluşan çizim ctx1 üzerine çizdiriliyor ve tampon çizim alanı(ctx2) clearRect() metoduyla temizleniyor. */
}
var tool = function (event) {
var evt = event || window.event;
var tool_ = evt.target;
arac = tool_.alt;
if (arac == "delete") {
ctx1.clearRect(0, 0, 800, 400);
/*Kullanıcı delete tuşuna bastığında canvas1 üzerindeki tüm grafikler silinecektir.*/
}
switch (arac) {
case "line":
maske.style.top = "0px";
break;
case "rect":
maske.style.top = "30px";
break;
case "ellipse":
maske.style.top = "60px";
break;
case "delete":
maske.style.top = "90px";
break;
}
}
</script>
<body onload="init();">
<div id="paint">
<canvas id="cvs" width="800" height="400">
Tarayıcı canvas elemanını desteklemiyor.
</canvas>
<div id="arac">
<img src="http://i.hizliresim.com/b8MmBb.png" alt="line" />
<img src="http://i.hizliresim.com/djZmOX.png" alt="rect" />
<img src="http://i.hizliresim.com/XWqmPk.png" alt="ellipse" />
<img src="http://i.hizliresim.com/59mbDL.png" alt="delete" />
<div id="maske"></div>- Bana ait değildir.
