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

  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
    Posts
    317
    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 03:57 PM.

  3. #3
    Join Date
    Sep 2007
    Posts
    317
    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 02:35 PM.

  4. #4
    Join Date
    Sep 2007
    Posts
    317
    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 01:30 PM.

  5. #5
    Join Date
    Sep 2007
    Posts
    317
    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 07:51 AM.

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