Rumah > hujung hadapan web > tutorial js > Lukis garisan tangen menggunakan kemahiran js drawing_javascript

Lukis garisan tangen menggunakan kemahiran js drawing_javascript

WBOY
Lepaskan: 2016-05-16 16:20:44
asal
1407 orang telah melayarinya

Sampel: http://www.zhaojz.com.cn/demo/draw9.html

Salin kod Kod adalah seperti berikut:

//Lukis garis tangen
//tunjuk satu titik di luar bulatan
//pusat bulatan titik
//r jejari
fungsi drawCircleTangent(titik, titik, r){
//Lukis garisan tambahan-mula
var color = 'DarkRed'; //Warna garis tangen
var color2 = "#ccc"; //Warna garis bantu lain
drawLine(dot, [dot[0] 9*r,dot[1]], {color: color2}); // Panjangkan garisan mendatar di mana pusat bulatan terletak
drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // Lukiskan garisan menegak di mana pusat bulatan terletak
drawPoint({
         pw:2,ph:2,warna:'Merah Gelap',titik: [titik[0] 9*r,titik[1],'x']
});
drawPoint({
         pw:2,ph:2,warna:'Merah Gelap',titik: [titik[0],titik[1]-4*r,'y']
});
drawLine(titik, [titik[0],titik[1]], {color: color2}); // Lukis garis menegak dari titik ke paksi-x
DrawLine(titik, titik, {color: color2}); // Sambungkan titik dan titik
drawLine([point[0]-2*r, point[1]], [point[0] 2*r, point[1]], {color: color2}); //Lukis garisan mendatar di mana titik terletak
//Lukis garisan tambahan-hujung
//point.push('point');
drawPoint({
         pw:2,ph:2,warna:'Merah Gelap',titik: titik
});
//dot.push('centre');
var r_square = Math.pow(r,2); // kuasa dua r
var point_v = titik[1]-dot[1]; //Kuasa dua jarak dari titik ke paksi-x
var point_h = titik[0]-dot[0]; //Kuasa dua jarak dari titik ke paksi-y
var c_square = Math.pow(point_v,2) Math.pow(point_h,2); //Kuasa dua jarak dari titik ke pusat bulatan
var c = Math.sqrt(c_square); //Jarak dari titik ke pusat bulatan
var sinA = Math.abs(point_v)/c; //sinA
var cosA = Math.abs(point_h)/c; //cosA
var b_square = c_square-r_square; //Kuasa dua jarak dari titik ke titik tangen
var b = Math.sqrt(b_square); //Jarak dari titik ke titik tangen
var sinB = b/c; //sinB
var cosB = r/c; //cosB
//Menggunakan pusat bulatan sebagai titik koordinat, tentukan sukuan di mana titik itu terletak
var kuadran = 1; //Nilai lalai
var pm_h = point_h == 0? point_h: point_h/Math.abs(point_h); //Arah mendatar
var pm_v = point_v == 0? point_v: point_v/Math.abs(point_v); //Arah menegak
var hv = pm_h*pm_v; //Darab, apabila -1, titik berada dalam sukuan pertama dan ketiga, apabila 1, titik berada dalam sukuan kedua dan keempat, dan apabila 0, titik berada pada paksi
suis(hv){
kes 1:
Jika((pm_j pm_v)==-2){
                  kuadran = 2; //Kuadran kedua
               } lain{
                 Kuadran = 4; //Kuadran keempat
            }
             rehat;
kes -1:
Jika((pm_h-pm_v)==-2){
                  Kuadran = 3; //Kuadran ketiga
            }
             rehat;
kes 0:
Jika((pm_h pm_v)==-1){ //Apabila titik berada pada separuh paksi negatif paksi-x atau separuh paksi positif paksi-y, disimpulkan bahawa titik itu berada dalam kuadran kedua
               kuadran = 2;
            }
Jika((pm_h pm_v)==1){ //Apabila titik itu berada pada separuh paksi positif paksi-x atau separuh paksi negatif paksi-y, disimpulkan bahawa titik itu berada di keempat. kuadran
               kuadran = 4;
            }
             rehat;
           lalai:
}
var sinC = 0;
    var conC = 0;
    ialah sinD = 0;
    var conD = 0;
    suis(kuadran){
        kes 1:
            sinC = cosB*cosA sinB*sinA; //sinC = sin(90 (B-A)) = cos(B-A) = cosB*cosA sinB*sinA
            denganC = -(tanpaB*cosA-cosB*tanpaA); //cosC = cos(90 (B-A)) = -sin(B-A) = -(sinB*cosA-cosB*sinA)
            sinD = -(cosA*cosB-sinA*sinB); //sinD = sin(270-(A B))
            conD = -(tanpaA*cosB cosA*tanpaB); //conD = cos(270-(A B))
            rehat;
        kes 2:
            sinC = -(cosB*cosA-sinB*sinA); //sinC = sin(-90 (A B))
            conC = sinA*cosB cosA*sinB; //conC = cos(-90 (A B))
            sinD = cosA*cosB sinA*sinB; //sinD = sin(90 (A-B))
            denganD = -(tanpaA*cosB-cosA*tanpaB); //conD = cos(90 (A-B))
            rehat;
        kes 3:
            sinC = -(cosA*cosB sinA*sinB); //sinC = sin(-90 (A-B))
            denganC = -(tanpaA*cosB-cosA*tanpaB); //conC = cos(-90 (A-B))
            sinD = (cosA*cosB-sinA*sinB); 
            conD = sinA*cosB cosA*sinB;
            rehat;
        kes 4:
            sinC = cosA*cosB-sinA*sinB;
            denganC = -(tanpaA*cosB cosA*tanpaB)
            sinD = -(cosA*cosB sinA*sinB); //sinD = sin(270 (A-B))
            denganD = (tanpaA*cosB-cosA*tanpaB); //conD = cos(270 (A-B))
            rehat;
        lalai:
    }
    var tangentPointA = [titik[0] b*conC, titik[1] b*sinC]; //Suit A位置
    drawLine(titik, tangenPointA, {warna: warna}); //画出切线
    drawLine(dot, tangentPointA, {color: color2}); //Saya minta maaf atas kerosakan
    //drawArc(point, 17, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinC )*180/Math.PI, 0);
    var tangentPointB = [titik[0] b*conD, titik[1] b*sinD]; //Beg pakaianB
    drawLine(titik, tangenPointB, {warna: warna}); //画出切线
    drawLine(dot, tangentPointB, {color: color2}); //Saya tidak sabar untuk berjumpa dengan anda
    //drawArc(point, 27, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinD )*180/Math.PI, 0);
    drawPoint({ //描切点
        pw:3,ph:3,warna:'Merah Gelap',titik: tangenPointA
    });
    drawPoint({ //描切点
        pw:3,ph:3,warna:'Merah Gelap',titik: tangenPointB
    });
    //画辅助弧
    //(kuadran ==1 ||kuadran==4?360:0)
    drawArc(titik, b, 60, (kuadran ==1 ||kuadran==4?180:0)-(kuadran ==2 ||kuadran==3?(-1):1)*Math.and(sinC )*180/Math.PI-5);
}
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan