8 Eylül 2015 Salı

OCANVAS LINKS-Css renk adları linki de var



1. Önce canvası indir.(http://ocanvas.org/download )2. olanı
2.kutuphaneyi kodumuzda kullanmalıyız.Bunun icin 2 yol var.birincisi web contecte sag tıklayıp scripts adlı new folder olusturup icine ındirdigimiz kutuphaneyi kopyalarız.Kodumuza da soyle bir satır ekleriz:<script src="scripts/ocanvas-2.8.1.js"></script>  ikincisi ise kutuphaneyi indirmeden direk net uzerinden link vererek kullanırız:
<script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.0.0/ocanvas.min.js"></script>
3.Canvas elementini html body arasında olustururuz:
<canvas id="canvas" width="800" height="600"></canvas>
4. sonra canvas objesini initialize ederiz.
var canvas = oCanvas.create({
    canvas: "#canvas", (burda esitligin sagındaki canvas id ile aynı sey olmak zorunda)//the only mandatory one is the canvas property: a CSS selector that must point to a canvas element within the DOM.
    background: "#0cc",//The background property allows you to apply a background to the canvas, which can be CSS color values, gradients and images. If it's omitted, the canvas will be transparent.
    fps: 60 //
The fps property sets the number of frames per second any animation will run at. The default is 30 fps.
});
5.ocanvas ile kare diktorgen vs. sekiller yaratabiliriz. sıra o asamaya geldi. Bir kutu yaratalım:
var box  = canvas.display.rectangle({
    x: 50,
    y: 150,
    width: 50,
    height: 50,
    fill: "#000"
});
 
6.daha sonra bu olusturdugumuz box ımızı canvas a eklememiz lazım.bunun icin ise add child kullanıyoruz.
canvas.addChild(box);


ben hala o gunleri anarsam yasıyorum dalından koparılmıs beyazbir cicek gibi
7.ornek bir html ekliyorum.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="scripts/ocanvas-2.8.1.js"></script>
<canvas id="mycanvas" width="500" height="200"></canvas>

<script type="text/javascript">
    var canvas = oCanvas.create({
        canvas:"#mycanvas",
        //background:"#0cc",
        fps:60
    });
   
    var box = canvas.display.rectangle({
        x:20,
        y:40,
        width:500,
        height:500,
        fill:"#0cc"
    });
   
    canvas.addChild(box);
    var square = canvas.display.rectangle({
        x: 0, y: 0, width: 50, height: 70, fill: "#990000"
    });
    box.addChild(square);
   
    var ellipse = canvas.display.ellipse({
        x: 100,
        y: 100,
        radius_x: 20,
        radius_y: 30,
        fill: "rgba(255, 0, 0, 0.5)"
    });
    box.addChild(ellipse);
   
   
    var text = canvas.display.text({
        x:80,
        y:50,
        align:"center",
        fill:"purple",
        text:"gamze sen"
    });
    canvas.addChild(text);
   
    //text.rotate(90);
   
//    text.bind("mouseenter", function () {
    //    canvas.rotate(90);
        //canvas.redraw();
//    });
   
    ellipse.bind("mouseenter", function () {
        canvas.background.set("#333");
    }).bind("mouseleave", function () {
        canvas.background.set("#000");
    });
</script>
</body>
</html>

renk kodları linki:

http://www.adobewordpress.com/css-color 
EVENTS:
  1. Bind() : Ornek bir kod yazalım.
box.bind("click tap",function(){
 canvas.background.set('#333');
}); 
Bu kodun yaptıgı islem sadece box a tıklandıgında arka plan rengini degistirmektir. 
 2.Mouse sekle girince ve cıkınca kutunun rengi degissin:
box.bind("mouseenter",function(){
canvas.background.set('#FF1493');
}).bind("mouseleave",function(){
canvas.background.set('#4B0082');
});
 3. canvas.redraw():
Mouse ile sekle gelince sekil bizden 50 pixel kacsın:
box.bind("mouseenter",function(){
box.x+=50;
canvas.redraw();
}); 
4. dragAndDrop(): bunun icin bind a ihtiyacımız yok. surukle bırak hareketini box icin yapmak istiyorsak:
box.dragAndDrop() dememiz yeterlidir. 
5. setLoop(): bir loop kuruyoruz. su sartlar gerceklestiginde parantez arasındaki işlemi yap seklinde.
mesela text imize tıkladıgımızda her seferinde donus hızı 20 artsın istiyoruz:
canvas.setLoop(function(){
    text.rotation+=20;
}) 
text.bind("click tap",function(){
    canvas.timeline.start();
}); 

Mesela text imize mouse girince dönsün, cıkınca dursun:
canvas.setLoop(function(){
    text.rotation+=20;
}) 
text.bind("mouseenter",function(){
    canvas.timeline.start();
}).bind("mouseleave",function(){
    canvas.timeline.stop();
});

6. removeChild(): silmek icin kullanırız.Mesela kutuya tıklandıgında silinmesi islemini yapalım:

box.bind("click tap",function(){
    canvas.removeChild(box);
});



Yeni bir ornek:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script src="scripts/ocanvas-2.8.1.js"></script>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script type="text/javascript">
        var canvas = oCanvas.create({
            canvas:"#canvas",
            background:"#FFE4C4",
            fps:60
        });
        var box = canvas.display.rectangle({
            x:20,
            y:340,
            width:50,
            height:20,
            fill:"#0cc"
        });
        canvas.addChild(box);
       
        var square  = canvas.display.rectangle({ x: 0, y: 0, width: 10, height: 10, fill: "#990000"});
        canvas.addChild(square);
        var ellipse = canvas.display.ellipse({
            x:260,
            y:290,
            radius_x:50,
            radius_y:20,
             fill: "rgba(255, 0, 0, 0.5)"
        });
        canvas.addChild(ellipse);
      
        var text = canvas.display.text({
            x:70,
            y:70,
            align:"center",
            fill:"red",
            text:"hello my name is computer"
        });
        canvas.addChild(text);
       
        text.bind("click tap",function(){
            canvas.background.set('#DC143C');
        });
        box.bind("mouseenter",function(){
            canvas.background.set('#FFD700');
        }).bind("mouseleave",function(){
            canvas.background.set('#808080');
        });
        ellipse.bind("mouseenter",function(){
            ellipse.x+=50;
            canvas.redraw();
        });
        text.dragAndDrop();
       
        canvas.setLoop(function(){
            text.rotation+=5;
        })
        text.bind("mouseenter",function(){
            canvas.timeline.start();
        }).bind("mouseleave",function(){
            canvas.timeline.stop();
        });
       
        box.animate(
                {
                    y: box.y - 300,
                    scalingX:.5,
                    scalingY: .5
                },
                "short",
                "ease-in",
                function () { 
                    box.fill = "#45931e";
                    canvas.redraw();
                }
            );square.fadeTo(.6);
            var introText = canvas.display.text({
                x: canvas.width / 2,
                y: canvas.height/2,
                align: "center",
                font: "bold 36px sans-serif",
                text: "Introduction",
                fill: "#000000"
            });
            var intro = canvas.scenes.create("intro", function () {
                this.add(introText);
            });
            canvas.scenes.load("intro");
    </script>
</body>
</html>

6.scale(): seklin x ve y eksenlerinin konumunu degistirmek icin kullanılır.
 
mesela bir kutu tanımlayıp sonra onu scale ile x in bir bucuk katına y nin yarısına getirelim:

var box= canvas.display.rectangle({
    x:300,
    y:400,
    width:200,
    height:300,
    fill:"#0ccc"
});

 box.bind("click tap", function(){
    this.scale(1.5,0.5);
    canvas.redraw();
});

7. arc : bir yay cizmemizi saglar. içi boş bir yay cizmek icin stroke kullanılır. 

var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});

var arc = canvas.display.arc({
    x: 177,
    y: 160,
    radius: 100,
    start: 100,
    end: -10,
    stroke: "10px #0aa"
}); 











eger ici bos yapmak istersek stroke yazarız.ici dolu olması icn stroke yazan satırı silip
#fill:"#FF7F50" yazarız.











bir dilim seklinde yazmak icin ise fill yazan satırın altına sunu ekleriz:
pieSection:true;












Kodumuzu ekliyorum:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="scripts/ocanvas-2.8.1.js"></script>
<canvas id="canvas" width="800" height="800"></canvas>
<script type="text/javascript">
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});

var arc = canvas.display.arc({
    x: 177,
    y: 160,
    radius: 100,
    start: 100,
    end: -10,
    //stroke: "10px #0aa"
    fill:"#FF7F50",
    pieSection:true
});

canvas.addChild(arc);
</script>
</body>

</html>


Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)