Tutorial melukis arka menggunakan HTML5 Canvas API_html5 petua tutorial

Lukis lengkok standard

Sebelum kita mula, mari mengoptimumkan persekitaran lukisan kita. Inspirasi datang dari tekstur kelas sebelumnya Jika anda tidak menyukai latar belakang ini, saya juga menyediakan imej latar belakang lain dalam direktori imej untuk anda pilih. Selain itu, semua helaian gaya ditulis di bawah .

Kod JavaScriptSalin kandungan ke papan keratan

2. "zh">
3. "UTF-8">
4. badan { latar belakang: url(
5. "./images/bg3.jpg") ulang;
6. #kanvas { sempadan: 1px pepejal #aaaaa;
7. "canvas-warp"
>
8. "kanvas">
Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !

window.onload = fungsi(){

var kanvas = document.getElementById(

"kanvas"

);

kanvas.lebar = 800;

kanvas.tinggi = 600;

var

konteks = canvas.getContext(

"2d"

);

context.fillStyle =

"#FFF"

; context.fillRect(0,0,800,600);

}

Hasil jalankan:

Sebab mengapa kita perlu melukis segi empat tepat kosong untuk mengisi kanvas adalah kerana seperti yang kita katakan sebelum ini, kanvas itu lutsinar Jika warna latar belakang tidak ditetapkan, ia akan dilindungi oleh tekstur . Saya rasa Untuk menjadikannya mempunyai warna latar belakang (putih), hanya ada satu cara untuk melukis segi empat tepat yang menutupi kanvas.

Bagaimana pula?

Gunakan arc() untuk melukis lengkok
Kaedah menggunakan arc() adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

1. context.arc(x,y,radius,startAngle,endAngle,lawan arah jam)

Tiga parameter pertama ialah koordinat pusat bulatan dan jejari bulatan. startAngle dan endAngle menggunakan nilai radian, bukan nilai sudut. Peraturan radian adalah mutlak, seperti yang ditunjukkan dalam rajah di bawah.

lawan arah jam menunjukkan kaedah lukisan, sama ada dilukis mengikut arah jam atau lawan jam. Ia melepasi nilai Boolean, benar bermakna melukis lawan jam, palsu bermaksud melukis mengikut arah jam, dan nilai lalai adalah palsu.

Peraturan radian adalah mutlak. Maksudnya jenis arka yang anda ingin lukis Cuma isikan arka mengikut piawaian di atas.

Contohnya, jika anda melukis lengkok 0.5pi ~ 1pi, jika anda melukisnya mengikut arah jam, ia akan menjadi 1/4 lengkok di sudut kiri bawah jika anda melukisnya mengikut arah jam, ia akan menjadi pelengkap 3 /4 arka di penjuru kanan sebelah atas. Cuba sendiri di sini tanpa memberi contoh.

Gunakan titik tangen untuk melukis lengkok

arcTo() pengenalan: Kaedah
arcTo() menerima 5 parameter, iaitu koordinat dua titik tangen dan jejari lengkok. Kaedah ini melukis lengkok berdasarkan tangen, iaitu, lengkok ditentukan oleh dua tangen.
Butiran adalah seperti berikut.

Kod JavaScriptSalin kandungan ke papan keratan

1. arcTo(x1,y1,x2,y2,radius)

Fungsi ini melukis lengkok dengan jejari tertentu Titik permulaan lengkok adalah tangen kepada garis lurus dari kedudukan laluan semasa ke titik (x1, y1). dari titik (x1, y1) ke titik (x2 , y2) adalah tangen kepada garis lurus. Oleh itu, ia biasanya digunakan dengan moveTo() atau lineTo(). Keupayaannya boleh digantikan dengan arka() yang lebih ringkas kerana ia menggunakan titik potong dalam kaedah lukisan.

Gunakan titik tangen untuk melukis lengkok:
Dalam kes berikut, saya juga melukis garisan tangen untuk melihatnya dengan lebih jelas.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

  

    window.onload = fungsi(){   

        var kanvas = document.getElementById("kanvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        drawArcTo(konteks, 200, 200, 600, 200, 600, 400, 100);   

    };   

  

    fungsi drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){   

        cxt.beginPath();   

        cxt.moveTo(x0, y0);   

        cxt.arcTo(x1, y1, x2, y2, r);   

  

        cxt.lineWidth = 6;   

        cxt.strokeStyle = "merah";   

        cxt.stroke();   

  

        cxt.beginPath();   

        cxt.moveTo(x0, y0);   

        cxt.lineTo(x1, y1);   

        cxt.lineTo(x2, y2);   

  

        cxt.lineWidth = 1;   

        cxt.strokeStyle = "#0088AA";   

        cxt.stroke();   

  

    }   

  

  

  

Hasil jalankan:

Kes ini juga menggambarkan peranan pelbagai perkara utama arcTo(). Untuk penerangan yang lebih jelas, saya akan menandakan satu lagi rajah analisis.

Sila ambil perhatian di sini bahawa titik permulaan lukisan arcTo() ialah (x0, y0), tetapi (x0, y0) tidak semestinya titik tangen lengkok. Fungsi arcTo() sebenar hanya melalui (x1, y1) dan (x2, y2). Antaranya (x1, y1) dipanggil titik kawalan, (x2, y2) ialah titik tangen titik akhir lengkok, yang tidak semestinya pada lengkok. Tetapi (x0, y0) mesti berada pada lengkok.
Ia agak berbelit-belit. Mari cuba dengan menukar parameter fungsi drawArcTo().
(x2, y2) tidak semestinya pada arka:

Kod JavaScriptSalin kandungan ke papan keratan

1. drawArcTo(konteks, 200, 100, 600, 100, 600, 400, 400);

(x0, y0) mestilah pada arka:

Kod JavaScript

Salin kandungan ke papan keratan

drawArcTo(konteks, 400, 100, 600, 100, 600, 400, 400);

Ia agak menarik ia menghubungkan secara langsung titik tangen dan (x0, y0) untuk membentuk segmen garisan untuk melalui (x0, y0). Sungguh arka yang berterusan...