www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help, trying to do a XY plot draw and angle calc in HTML5 Canvas with Javascript

Hybrid View

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    Unhappy Help, trying to do a XY plot draw and angle calc in HTML5 Canvas with Javascript

    Hello, I am new in this forum. I will start to be active on Javascript programming. Ive been struggling too hard on the following:

    Im looking forward to do a simple app that allows me to draw lines and get the angle between the vectors drawed. (Mainly to compile it with Phonegap and use it on touch, when I touch a coordinate it will mark a point, and when I mark the point b it will draw the vector)
    I have knowledge of the Math formula I need to apply in order to get the angle between specific vectors.
    The problem Im having right now is that I dont know how to draw the arc between the 2 vectors and display the value close to it to show how many grades it has on the angle.
    Ive seen some libraries like: http://jsdraw2dx.jsfiction.com/documentation.htm That are already coded to do vector drawing easily.
    I also found many more methods to get the angle like for example: http://www.wikihow.com/Find-the-Angle-Be...wo-Vectors
    What I want to do is this:

    http://i.imgur.com/vk6Prcr.png

    So I want to be able to mark any point in the graph (A) then mark B point to get a line automatically drawed and when I mark the C point it will draw the line between B and C and automatically get the Theta 90 grades in this case of the example.
    Im struggling this because I do know how to get the grade, but dont know how to position it and draw the arc between the vectors.
    Anyone knows how to reach a quick solution for this?

    Please help, this is mainly to adapt and draw when I take picture, I can do that and use this as a second layer, but I cant draw the arc of the vector and display the angle right next to it.

  2. #2
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    As far as I know

    click on canvas
    Code:
      
    <html>
    <head>
    <style type="text/css">
    body {margin:0px; padding:0px;}
    </style>
    </head>
    <body>
    <canvas id="myCanvas" onclick="show_coords(event)" width="421" height="421" style="margin:0px; padding:0px;background-color:transparent;border:1px solid silver;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?293751-Help-trying-to-do-a-XY-plot-draw-and-angle-calc-in-HTML5-Canvas-with-Javascript
    //grid width and height
    var bw = 400;
    var bh = 400;
    //padding around grid
    var p = 10;
    //size of canvas
    var cw = bw + (p*2) + 1;
    var ch = bh + (p*2) + 1;
    
     var canvas=document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    function drawBoard(){
    // ilk for döngüsü yukarıdan aşağıya çizgiler çiziyor her çizginin sol üst tarafına sayı yazıyor.
        for (var x = 0; x <= bw; x += 40) {
            context.moveTo(0.5 + x + p, p);  // çizginin başladığı yer
            context.lineTo(0.5 + x + p, bh + p);  // çizginin bittiği yer
           // context.fillText(x/40,x,8);  // rakamları yazan satır burası
        }
    
    // ikinci for döngüsü soldan sağa çizgiler çiziyor. her çizginin sol tarafın sayı yazıyor.
        for (var x = 0; x <= bh; x += 40) {
            context.moveTo(p, 0.5 + x + p);  // çizginin başladığı yer
            context.lineTo(bw + p, 0.5 + x + p);  // çizginin bittiği yer
           //context.fillText(x/40,0,x + 7); // rakamları yazan satır burası
        }
    
        context.strokeStyle = "black"; // çizgi rengi
        context.stroke();
    }
    
    
    drawBoard(); // tahtayı çiziyor
    
    
    
    var noktalar = [];
    
    // http://www.w3schools.com/jsref/event_clientx.asp
    // <body onclick="show_coords(event)" >
    
    function show_coords(event)
      {
      var x=event.clientX
      var y=event.clientY
      alert("X coords: " + x + ", Y coords: " + y);
    
    noktalar.push(x,y); //
    if(noktalar.length <3) {noktaKoy(x,y); }
    if(noktalar.length>2 && noktalar.length<7 ) {noktaKoy(x,y);  cizgiCiz();}
    
      }
    
    // <p onmousedown="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p>
    
    var harfler =["A","B","C"];
    var n =0;
    function noktaKoy(x,y) {
    
    context.beginPath();
    var r =20;
      context.arc(x,y,r,0,2*Math.PI);
      context.fillStyle="red";
      context.fill();
      context.lineWidth="3";
      context.strokeStyle="#663399";
    context.font="20px Arial";
    context.fillText(harfler[n], x-20,y-20);
     context.stroke();
    n++;
    }
     
    
    
    
    var say=0;
    function cizgiCiz() {
    
    context.beginPath();
    context.moveTo(noktalar[say],noktalar[say+1]);
    context.lineTo(noktalar[say+2],noktalar[say+3]);
    context.lineWidth="4";
    context.strokeStyle= "#336699";  
    context.stroke();
    say = say+2;
    
    }
    // http://www.w3schools.com/tags/canvas_arc.asp
    
    </script>
    
    </body>
    </html>
    this code is working in firefox 4.0b9
    Last edited by Ayşe; 05-04-2014 at 02:57 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    click on canvas 3 times
    Code:
      
      
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    body {margin:0px; padding:0px;}
    #myCanvas { margin:0px; padding:0px;background-color:transparent;border:1px solid silver;}
    #pano { position:absolute; left:450px; top:10px; width:350px; height:350px; }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" onclick="show_coords(event)" width="400" height="400" >
    Your browser does not support the HTML5 canvas tag.</canvas>
    <div id="pano">&nbsp;</div>
    
    <script type="text/javascript">
    // http://jsdraw2dx.jsfiction.com/documentation.htm
    // http://www.webdeveloper.com/forum/showthread.php?293751-Help-trying-to-do-a-XY-plot-draw-and-angle-calc-in-HTML5-Canvas-with-Javascript&p=1329619#post1329619
    
    var el = document.getElementById('pano');
    el.innerHTML ="";
    //size of canvas
    var cw = 400;
    var ch = 400;
    var canvas=document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    
    var noktalar = [];
    // http://www.w3schools.com/jsref/event_clientx.asp
    function show_coords(event)   {
      var x=event.clientX
      var y=event.clientY
    
    noktalar.push(x,y); //
    if(noktalar.length <3) {noktaKoy(x,y); }
    if(noktalar.length>2 && noktalar.length<5 ) {noktaKoy(x,y);  cizgiCiz(); ; noktaYazA(x,y);  noktaYazB(); }
    if(noktalar.length>4 && noktalar.length<7 ) {noktaKoy(x,y);  cizgiCiz(); noktaYazC();  eksenCiz(noktalar[2], noktalar[3]); noktaYazD();noktaYazE(); 
    /*bul(); */}
    noktaYazF();  noktaYazH(); DBA();  EBC();
    }
    
    function noktaKoy(x,y) {
      context.beginPath();
      context.arc(x,y,2,0,2*Math.PI);
      context.fillStyle="green";
      context.fill();
      context.lineWidth="1";
      context.strokeStyle="sandybrown";
     context.stroke();
    }
    
    var say=0;
    function cizgiCiz() {
    context.beginPath();
    context.moveTo(noktalar[say],noktalar[say+1]);
    context.lineTo(noktalar[say+2],noktalar[say+3]);
    context.lineWidth="1";
    context.strokeStyle= "lime";  
    context.stroke();
    say = say+2;
    }
    
    function eksenCiz(x,y){
    // x eksenini çiziyoruz
    context.beginPath();
    context.moveTo(0,y);
    context.lineTo(cw,y);
    context.lineWidth="1";
    context.strokeStyle= "turquoise";  
    context.font="14px Arial";
    context.fillStyle="blue";
    context.fill();
    context.fillText("x", (x-(x-15)),y+15);
    context.stroke();
    
    // y eksenini çiziyoruz
    context.beginPath();
    context.moveTo(x,0);
    context.lineTo(x,ch);
    context.lineWidth="1";
    context.strokeStyle= "turquoise"; 
    context.font="14px Arial";
    context.fillText("y", x+10,(y-(y-15)) ); 
    context.stroke();
    
    }
    var noktaA=[];
    function noktaYazA(){
    // A noktasının x ve y değerlerini yazalım
    var a = noktalar[0] - noktalar[2];
    var b = noktalar[3] - noktalar[1];
    noktaA.push(a,b);// bundan faydalanarak hipotenüsü bulacağız. sonra da sinüs bulacağız.
    var metin = " A("+a+","+b+")";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[0], noktalar[1]);
    }
    
    function noktaYazB(){
    var metin = " B("+ (noktalar[2] - noktalar[2]) + ","+ (noktalar[3]-noktalar[3]) + ")";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[2], noktalar[3]);
    }
    
    var noktaC=[];
    function noktaYazC(){
    var a = noktalar[4] - noktalar[2];
    var b = noktalar[3] - noktalar[5];
    noktaC.push(a,b);
    var metin = " C("+a+","+b+")";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[4], noktalar[5]);
    }
    
    function noktaYazD(){
    var metin = " D(0,"+noktaA[1]+")";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[0]-noktaA[0], noktalar[1]);
    context.beginPath();
    context.moveTo(noktalar[0],noktalar[1]);
    context.lineTo(noktalar[2],noktalar[1]);
    context.lineWidth="1";
    context.strokeStyle= "pink";  
    context.stroke();
    }
    
    
    function noktaYazE(){
    var metin = " E(0,"+noktaC[1]+")";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[4]-noktaC[0], noktalar[5]);
    context.beginPath();
    context.moveTo(noktalar[4],noktalar[5]);
    context.lineTo(noktalar[2],noktalar[5]);
    context.lineWidth="1";
    context.strokeStyle= "pink";  
    context.stroke();
    
    }
    
    function noktaYazF(){
    var metin = " F("+noktaC[0]+",0)";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[4], noktalar[5] + noktaC[1] );
    context.beginPath();
    context.moveTo(noktalar[4],noktalar[5]);
    context.lineTo(noktalar[4] ,noktalar[5] + noktaC[1] );
    context.lineWidth="1";
    context.strokeStyle= "orange";  
    context.stroke();
    
    }
    
    
    function noktaYazH(){
    var metin = " H("+noktaA[0]+",0)";
    context.font="12px Arial";
    context.fillText(metin,  noktalar[0],  noktalar[1] + noktaA[1] );
    context.beginPath();
    context.moveTo(noktalar[0],noktalar[1]);
    context.lineTo(noktalar[0] ,noktalar[1] +noktaA[1] );
    context.lineWidth="1";
    context.strokeStyle= "orange";  
    context.stroke();
    
    }
    
    // DBA açısının ölçüsünü bulalım.
    function DBA(){
    
    var hip= Math.sqrt(Math.pow(noktaA[0] ,2) + Math.pow(noktaA[1]  ,2 ) );
    var sinB= noktaA[0] / hip;
    var olcu1 = sinB * (180/Math.PI);  // Bu satır doğru mu?
    
    var olcu2= 90 - Math.abs(olcu1);
    el.innerHTML += "|DB| = "+noktaA[1] +"<br>";
    el.innerHTML += "|DA| = "+noktaA[0] +"<br>";
    el.innerHTML += "|AB| = "+hip +"<br>";
    el.innerHTML += "|DA| / |AB| = "+ sinB +"<br>";
    el.innerHTML += "|HA| / |AB| = "+  (noktaA[1] / hip) +"<br>";
    el.innerHTML += "DBA açısı = "+ olcu1+"<br>";  //
    el.innerHTML += "ABH açısı = "+ olcu2 +"<br>";
    
    }
    // EBC açısının ölçüsü
    function EBC(){
    var hip= Math.sqrt(Math.pow(noktaC[0] ,2) + Math.pow(noktaA[1]  ,2 ) );
    var sinB= noktaC[0] /hip;
    var olcu1 = sinB * (180/Math.PI); // Bu satır doğru mu?
    var olcu2= 90-Math.abs(olcu1);
    el.innerHTML += "|EB| = "+noktaC[1] +"<br>";
    el.innerHTML += "|EC| = "+noktaC[0] +"<br>";
    el.innerHTML += "|CB| = "+hip +"<br>";
    el.innerHTML += "|EC| / |CB| = "+ sinB +"<br>";
    el.innerHTML += "EBC acısı = "+ olcu1+"<br>"; 
    el.innerHTML += "CBF açısı = "+ olcu2 +"<br>";
    
    }
    </script>
    </body>
    </html>
    Last edited by Ayşe; 05-06-2014 at 01:35 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  4. #4
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    click on canvas 3 times

    Code:
      
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    #mycanvas {  background-color:transparent; background-image:url(tablo.png); background-repeat:no-repeat; border:4px solid #786;}
    </style>
    </head>
    <body>
    
    <canvas id="myCanvas" onclick="show_coords(event)" width="400" height="400" >
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script type="text/javascript">
    // radyan=(derece/180)*math.pi
    // derece=(radyan/math.pi)*180
    
    
    
    var Tan = ["0", "0.017455", "0.034921", "0.052408", "0.069927", "0.087489", "0.105104", "0.122785", "0.140541", "0.158384", "0.176327", "0.19438", "0.212557", "0.230868", "0.249328", "0.267949", "0.286745", "0.305731", "0.32492", "0.344328", "0.36397", "0.383864", "0.404026", "0.424475", "0.445229", "0.466308", "0.487733", "0.509525", "0.531709", "0.554309", "0.57735", "0.600861", "0.624869", "0.649408", "0.674509", "0.700208", "0.726543", "0.753554", "0.781286", "0.809784", "0.8391", "0.869287", "0.900404", "0.932515", "0.965689", "1", "1.03553", "1.072369", "1.110613", "1.150368", "1.191754", "1.234897", "1.279942", "1.327045", "1.376382", "1.428148", "1.482561", "1.539865", "1.600335", "1.664279", "1.732051", "1.804048", "1.880726", "1.962611", "2.050304", "2.144507", "2.246037", "2.355852", "2.475087", "2.605089", "2.747477", "2.904211", "3.077684", "3.270853", "3.487414", "3.732051", "4.010781", "4.331476", "4.70463", "5.144554", "5.671282", "6.313752", "7.11537", "8.144346", "9.514364", "11.43005", "14.30067", "19.08114", "28.63625", "57.28996" ];
    
    var cw = 400;
    var ch = 400;
    var canvas=document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    
    var nokta = [];
    var noktaA=[];
    var noktaC=[];
    var ns=0;
    var metin="";
    
    function show_coords(event)   {
      var x=event.clientX;
      var y=event.clientY;
    if(ns>3) {return false;}
    if(ns<=3) {nokta.push(x,y);  ns++; }
    if(nokta.length == 2) { noktaKoy(x,y, "A" ); }
    if(nokta.length == 4 ) { 
    ns++;
    noktaA.push(nokta[0]-x , y - nokta[1] );
    metin = "  ("+noktaA[0]+","+noktaA[1]+")";
    noktaKoy(nokta[0], nokta[1], metin );  
    metin = "B(0,0)";
    noktaKoy(x,y, metin ); 
    cizgiCiz(x,y); 
    
    }
    if(nokta.length == 6 ) { 
    ns++;
    noktaC.push(x - nokta[2], nokta[3] - y);
    metin = "C("+noktaC[0]+","+noktaC[1]+")";
    noktaKoy(x,y, metin ); 
    cizgiCiz(x,y); 
    //eksenCiz(nokta[2], nokta[3] ); 
    
    bolge(noktaA);
    bolge(noktaC);
    //alert(bolgesi);
    
    hesaplamalar();
    dereceYaz();
    noktaBul();
    }  
    }
    
    function eksenCiz(x,y){
    // x eksenini çiziyoruz
    context.beginPath();
    context.moveTo(0,y);
    context.lineTo(cw,y);
    context.lineWidth="1";
    context.strokeStyle= "turquoise";  
    context.font="14px Arial";
    context.fillStyle="blue";
    context.fill();
    context.fillText("x", (x-(x-15)),y+15);
    context.stroke();
    
    // y eksenini çiziyoruz
    context.beginPath();
    context.moveTo(x,0);
    context.lineTo(x,ch);
    context.lineWidth="1";
    context.strokeStyle= "turquoise"; 
    context.font="14px Arial";
    context.fillText("y", x+10,(y-(y-15)) ); 
    context.stroke();
    
    }
    
    function noktaKoy(x,y, metin) {
    context.font="12px Arial";
    context.fillText(metin,  x, y);
      context.beginPath();
      context.arc(x,y,2,0,2*Math.PI);
      context.fillStyle="green";
      context.fill();
      context.lineWidth="1";
      context.strokeStyle="sandybrown";
     context.stroke();
    }
    
    var say=0;
    function cizgiCiz(x,y) {
    context.beginPath();
    context.moveTo(nokta[say], nokta[say+1] );
    context.lineTo(x,y);
    context.lineWidth="1";
    context.strokeStyle= "lime";  
    context.stroke();
    say = say+2;
    }
    var bolgesi=[];
    function bolge(dizi) {
    
    if(dizi[0] >0 && dizi[1]>0 ) { bolgesi[bolgesi.length]=1;}
    if(dizi[0] >0 && dizi[1]<0 ) { bolgesi[bolgesi.length]=4;}
    if(dizi[0] < 0 && dizi[1]>0 ) { bolgesi[bolgesi.length]=2;}
    if(dizi[0] <0 && dizi[1]<0 ) { bolgesi[bolgesi.length]=3;}
    }
    
    function derece(oran){
    var angle
    for(var i=1; i< Tan.length; i++){
    if(oran >= Tan[i-1] && oran <Tan[i]) {angle =i; break; }
    }
    return angle;
    }
    var ABC;
    function hesaplamalar(){ 
    
    //alert(bolgesi);
    var toplam = bolgesi[0]+bolgesi[1];
    //alert("toplam= "+toplam);
    var bir, iki;
    var karsiKomsuOran, karsiKomsuOran2;
    
    
    if(bolgesi[0]== bolgesi[1] ) {
    karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
    bir = derece(karsiKomsuOran);
    karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
    iki = derece(karsiKomsuOran2);
    ABC = Math.abs(bir - iki); 
    }
    
    if(bolgesi[0]!= bolgesi[1] ) {
    
    if(toplam ==5) {
    karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
    bir = derece(karsiKomsuOran);
    karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
    iki = derece(karsiKomsuOran2);
    ABC = bir + iki; 
    }
    
    if(toplam ==3 || toplam == 7) {
    karsiKomsuOran = Math.abs(noktaA[0]) / Math.abs(noktaA[1]);
    bir = derece(karsiKomsuOran);
    karsiKomsuOran2 = Math.abs(noktaC[0]) / Math.abs(noktaC[1]);
    iki = derece(karsiKomsuOran2);
    ABC = bir + iki; 
    }
    
    if(toplam == 4 ) { 
       if(bolgesi[0]==1) { 
        karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
        bir = derece(karsiKomsuOran);
        karsiKomsuOran2 = Math.abs(noktaC[0]) / Math.abs(noktaC[1]);
        iki = derece(karsiKomsuOran2) ;
       ABC = bir + iki+ 90; 
       }
       if(bolgesi[0]==4) { 
        karsiKomsuOran = Math.abs(noktaA[0]) / Math.abs(noktaA[1]);
        bir = derece(karsiKomsuOran);
        karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
        iki = derece(karsiKomsuOran2) ;
        ABC = bir + iki+ 90;
       }
    }
    if(toplam == 6 ) { 
       if(bolgesi[0]==4) { 
        karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
        bir = derece(karsiKomsuOran);
        karsiKomsuOran2 = Math.abs(noktaC[0]) / Math.abs(noktaC[1]);
        iki = derece(karsiKomsuOran2) ;
        ABC = bir + iki+ 90;
       }
       if(bolgesi[0]==2) { 
        karsiKomsuOran = Math.abs(noktaA[0]) / Math.abs(noktaA[1]);
        bir = derece(karsiKomsuOran);
        karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
        iki = derece(karsiKomsuOran2) ;
        ABC = bir + iki+ 90;
       }
        
    }
    }
    //alert("ABC = "+ABC);
    }
    
    function dereceYaz(){
    
    context.fillStyle="red";
    
    var sol = nokta[0]-nokta[4];
    var soldan;
    if(nokta[0]<nokta[4]) {soldan = Math.abs(sol)/2 + nokta[0];}
    if(nokta[0]>nokta[4]) {soldan = Math.abs(sol)/2 + nokta[4];}
    
    var ust = nokta[1]-nokta[5];
    var ustten;
    if(nokta[1]<nokta[5]) {ustten = Math.abs(ust)/2 + nokta[1];}
    if(nokta[1]>nokta[5]) {ustten = Math.abs(ust)/2 + nokta[5];}
    
    context.font="18px Arial";
    context.fillText(ABC +"°",  soldan , ustten); 
    
    // http://www.degraeve.com/reference/specialcharacters.php
    // degree sign	°	&deg;	°
    }
    
    </script>
    </head>
    </html>
    if A(0,... ) C(..., 0) , this code write "undefined".
    Last edited by Ayşe; 05-09-2014 at 12:30 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  5. #5
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    draw the arc between AB and BC

    Code:
      
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    body {margin:0px; padding:0px;}
    #mycanvas { margin:0px; padding:0px; background-color:transparent;/* background-image:url(trigonometri_cetveli.jpg); background-repeat:no-repeat; */ border:4px solid #786;}
    </style>
    </head>
    <body>
    <canvas id="myCanvas" onclick="cnvs_getCoordinates(event)" width="400" height="400" >
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script type="text/javascript">
    
    /*
    
       -+    |    ++
       ------|------
       --    |    +-
    
    */
    
    // http://www.w3schools.com/html/tryhtml5_canvas_coordinates.htm
    // http://www.w3schools.com/tags/ref_canvas.asp
    // http://www.w3schools.com/tags/canvas_arc.asp
    var Tan = ["0", "0.017455", "0.034921", "0.052408", "0.069927", "0.087489", "0.105104", "0.122785", "0.140541", "0.158384", "0.176327", "0.19438", "0.212557", "0.230868", "0.249328", "0.267949", "0.286745", "0.305731", "0.32492", "0.344328", "0.36397", "0.383864", "0.404026", "0.424475", "0.445229", "0.466308", "0.487733", "0.509525", "0.531709", "0.554309", "0.57735", "0.600861", "0.624869", "0.649408", "0.674509", "0.700208", "0.726543", "0.753554", "0.781286", "0.809784", "0.8391", "0.869287", "0.900404", "0.932515", "0.965689", "1", "1.03553", "1.072369", "1.110613", "1.150368", "1.191754", "1.234897", "1.279942", "1.327045", "1.376382", "1.428148", "1.482561", "1.539865", "1.600335", "1.664279", "1.732051", "1.804048", "1.880726", "1.962611", "2.050304", "2.144507", "2.246037", "2.355852", "2.475087", "2.605089", "2.747477", "2.904211", "3.077684", "3.270853", "3.487414", "3.732051", "4.010781", "4.331476", "4.70463", "5.144554", "5.671282", "6.313752", "7.11537", "8.144346", "9.514364", "11.43005", "14.30067", "19.08114", "28.63625", "57.28996" ];
    var n = 0;
    var nokta = [];
    function cnvs_getCoordinates(e)   {
    if(n< 3) {
      var x=e.clientX;
      var y=e.clientY;
      nokta.push(x,y);
      duzenle(x,y); 
      n++;
      }
    }
     
    var canvas=document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    
    function duzenle(x,y) {  
    
    if(nokta.length == 2 ) {  noktaKoy(x,y, "A" ); }
    if(nokta.length == 4 ) {  noktaKoy(x,y, "B" ); cizgiCiz(x,y);}
    if(nokta.length == 6 ) {  noktaKoy(x,y, "C" ); cizgiCiz(x,y);  hesapla();}
    }
    
    // http://www.w3schools.com/html/html5_canvas.asp
    
    function metinYaz(m,x,y){
      context.font="12px Arial";
      context.fillStyle="sandybrown";
      context.fillText(m,  x, y);
      context.fill();
     }
    function noktaKoy(x,y, metin) {
      context.font="12px Arial";
      context.fillStyle="lightseagreen";
      context.fill();
      context.fillText(metin,  x, y);
      context.beginPath();
      context.arc(x,y,2,0,2*Math.PI);
      context.fillStyle="lightseagreen";
      context.fill();
      context.lineWidth="1";
      context.strokeStyle="lightseagreen";
      context.stroke();
    }
    
    
    var say=0;
    function cizgiCiz(x,y) {
      context.beginPath();
      context.moveTo(nokta[say], nokta[say+1] );
      context.lineTo(x,y);
      context.lineWidth="1";
      context.strokeStyle= "turquoise";  
      context.stroke();
      context.closePath()
      say = say+2;
    }
    
    function derece(oran, dizi){
    var angle
      for(var i=1; i< dizi.length; i++){
      if(oran >= dizi[i-1] && oran < dizi[i]) {angle =i; break; }
      }
      return angle;
    }
    
    var ABC;
    function hesapla(){
    // A ve C noktalarının x ve y değerlerini bulalım
    var Ax = nokta[0] - nokta[2];
    var Ay = nokta[3] - nokta[1];
    var Cx = nokta[4] - nokta[2];
    var Cy = nokta[3] - nokta[5];
    
    noktaKoy(nokta[2], nokta[1], "H");
    // HBA açısı
    var xOrta= (nokta[0] + nokta[2]+nokta[2])/3;
    var yOrta= (nokta[1] + nokta[3] + nokta[1])/3;
    var HBA= derece(Math.abs(Ax)/Math.abs(Ay),Tan);
    metinYaz(HBA +"°",xOrta,yOrta);
    
    noktaKoy(nokta[0], nokta[3], "D");
    // DBA açısı
    var xOrta= (nokta[0] + nokta[2]+nokta[0])/3;
    var yOrta= (nokta[1] + nokta[3] + nokta[3])/3;
    var DBA= derece(Math.abs(Ay)/Math.abs(Ax),Tan);// 
    metinYaz(DBA+"°",xOrta,yOrta);
    
    noktaKoy(nokta[4], nokta[3], "G");
    // GBC açısı
    var xOrta= (nokta[2] + nokta[4]+nokta[4])/3;
    var yOrta= (nokta[3] + nokta[3] + nokta[5])/3;
    var GBC= derece(Math.abs(Cy/Cx),Tan);// 
    metinYaz(GBC+"°",xOrta,yOrta);
    
    
    noktaKoy(nokta[2], nokta[5], "F");
    // FBC açısı
    var xOrta= (nokta[4] + nokta[2]+nokta[2])/3;
    var yOrta= (nokta[5] + nokta[3] + nokta[5])/3;
    var FBC= derece(Math.abs(Cx/Cy),Tan);
    metinYaz(FBC+"°",xOrta,yOrta);
    
    
    //  iki kenarın arasına açı işareti çizmek
    var A= [];
    //++++
    if(Ax>0 && Ay>0 && Cx>0 && Cy>0 ) {   
    A[0]= 1.5*Math.PI +((HBA/180)*Math.PI);
    A[1]= 2*Math.PI - ((GBC/180)*Math.PI) ;
    A[2]=  90-(HBA +GBC) ; 
    }
    //----
    if(Ax<0 && Ay<0 && Cx<0 && Cy<0 ) {    
    //ABC= ((( Math.PI - ((DBA/180)*Math.PI)) - ( 0.5*Math.PI +((FBC/180)*Math.PI) )) / Math.PI ) *180
    A[0]= 0.5*Math.PI +((FBC/180)*Math.PI);
    A[1]= Math.PI - ((DBA/180)*Math.PI) ;
    A[2]=  90-(HBA +GBC) ; 
    }
    //+++-
    if(Ax>0 && Ay>0 && Cx>0 && Cy<0 ) { 
    A[0]= 1.5*Math.PI +((HBA/180)*Math.PI);
    A[1]= 2*Math.PI + ((GBC/180)*Math.PI);
    A[2]=  180 - (HBA +FBC) ; 
    
    }
    
    //-+-+ 
    if(Ax<0 && Ay>0 && Cx<0 && Cy>0 ) { 
    A[0]= Math.PI +((GBC/180)*Math.PI);
    A[1]= 1.5*Math.PI - ((HBA/180)*Math.PI);
    A[2]=  90-(HBA +GBC) ;
    
    }
    //-+--      sorun yok  A noktası -+ alanında olacak
    if(Ax<0 && Ay>0 && Cx<0 && Cy<0 ) { 
    A[0]= 0.5*Math.PI + ((FBC/180)*Math.PI);
    A[1]= 1.5*Math.PI -((HBA/180)*Math.PI);
    A[2]=   180 - (HBA + FBC)  ;
    
    }
    // -+++
    if(Ax<0 && Ay>0 && Cx>0 && Cy>0 ) {
    A[0]= 1.5*Math.PI -((HBA/180)*Math.PI);
    A[1]= 1.5*Math.PI + ((FBC/180)*Math.PI);
    A[2]=  180- (GBC + DBA) ;
    }
    // --+-     A/\C
    if(Ax<0 && Ay<0 && Cx>0 && Cy<0 ) { //ABC = 180 - (GBC + DBA); alert(ABC);
    A[0]= 0.5*Math.PI -((FBC/180)*Math.PI);
    A[1]= 0.5*Math.PI + ((HBA/180)*Math.PI);
    A[2]=  HBA + FBC ;
    }
    //+-+-
    if(Ax>0 && Ay<0 && Cx>0 && Cy<0 ) {   
    A[0]= 0+((DBA/180)*Math.PI);
    A[1]= 0.5*Math.PI - ((FBC/180)*Math.PI);
    A[2]=  90-(DBA + FBC) ;
    }
    
    //+---
    if(Ax>0 && Ay<0 && Cx<0 && Cy<0 ) {   
    A[0]= 0+((DBA/180)*Math.PI);
    A[1]= 0.5*Math.PI + ((FBC/180)*Math.PI);
    A[2]=  180-(DBA + GBC) ;
    }
    
    
    context.closePath(); 
    
    context.beginPath();
    context.strokeStyle= "red"; 
    context.arc(nokta[2],nokta[3], 40, A[0], A[1]  );
    context.stroke();
    context.closePath();
    
    //dereceYaz( A[2] );
    
    var ang= Math.round( (( A[1] - A[0]) /Math.PI ) *180  );
    dereceYaz(ang);
    }
    
    function dereceYaz(a){
    // ağırlık merkezini bulalım
    var gx = (nokta[0]+nokta[2]+nokta[4] )/3;
    var gy=  (nokta[1]+nokta[3]+nokta[5])/3;
    context.fillStyle="red";
    context.font="18px Arial";
    context.fillText(a +"°",  gx , gy); 
    
    }
    </script>
    Click on canvas 3 times 
    <br>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Circle_radians.gif/300px-Circle_radians.gif" width="300" height="300" alt="">
    </head>
    </html>
    This code is working in firefox 4.0b9
    Last edited by Ayşe; 05-14-2014 at 06:51 AM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles