Strategi hebat untuk melukis segi empat tepat menggunakan HTML5 Canvas API_html5 petua tutorial

Gunakan closePath() untuk menutup bentuk
Mula-mula kita melukis segi empat tepat menggunakan kaedah yang paling biasa.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "ms">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8.   
9. "zh">   
10.   
11.     "UTF-8">   
12.     绘制矩形   
13.   
14.   
15. "canvas-warp">   
16.     "kanvas" style="sempadan: 1px pepejal #aaaaa; paparan: sekat; margin: 50px auto ;">   
17.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
18.        

  

  

  

    window.onload = fungsi(){   

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

        canvas.width = 800;   

        canvas.height = 600;   

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

  

        context.beginPath();   

        context.moveTo(150,50);   

        context.lineTo(650,50);   

        context.lineTo(650,550);   

        context.lineTo(150,550);   

        context.lineTo(150,50);     //绘制最后一笔使图像闭合   

        context.lineWidth = 5;   

        context.strokeStyle = "hitam";   

        context.stroke();   

  

    }   

  

  

  

  

  

Hasil jalankan:

Sepintas lalu, tidak ada yang salah dengannya, tetapi kasut kanak-kanak yang mempunyai penglihatan yang baik telah mendapati bahawa terdapat masalah apabila strok terakhir ditutup, mengakibatkan jurang di sudut kiri atas. Keadaan ini disebabkan oleh menetapkan lineWidth. Jika lalai adalah 1 lejang, tidak akan ada masalah. Tetapi semakin besar pukulan dan semakin lebar garisan, semakin jelas jurang ini. Jadi bagaimana untuk mengelakkan situasi ini?
Tajuk itu telah merosakkannya, gunakan clothPath() untuk menutup bentuk.

Kod JavaScriptSalin kandungan ke papan keratan

2. "zh">
3. "UTF-8">
4. Lukiskan segi empat tepat
5. "canvas-warp">
6. "kanvas"
7. style="sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;"
8. > 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.beginPath(); context.moveTo(150,50);

context.lineTo(650,50); context.lineTo(650,550);

context.lineTo(150,550); context.lineTo(150,50);

//Anda tidak perlu melukis pukulan terakhir context.closePath(); //Gunakan closePath() untuk menutup grafik

context.lineWidth = 5;

context.strokeStyle = "hitam"

; context.stroke();

}

Hasil jalankan:

Dalam contoh ini, digabungkan dengan penjelasan dalam pelajaran sebelumnya, kita tahu bahawa apabila melukis laluan, kita perlu membungkus laluan yang dirancang dengan beginPath() dan closePath(). Sudah tentu, anda tidak perlu melukis lejang terakhir, hanya gunakan closePath() secara terus, dan ia akan menutupnya secara automatik untuk anda. (Jadi jika anda tidak mahu melukis bentuk tertutup, anda tidak boleh menggunakan closePath())

Warnakan segi empat tepat
Di sini kami akan memperkenalkan kaedah fill() yang sama pentingnya dengan stroke(). Sama seperti strok asal, sebelum mengisi, kita mesti menggunakan atribut fillStyle dahulu untuk memilih warna yang hendak diisi.
Contohnya, jika kita ingin mewarnakan segi empat tepat di atas kuning, kita boleh menulisnya seperti ini.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.        

  

  

  

    window.onload = fungsi(){   

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

        canvas.width = 800;   

        canvas.height = 600;   

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

  

        context.beginPath();   

        context.moveTo(150,50);   

        context.lineTo(650,50);   

        context.lineTo(650,550);   

        context.lineTo(150,550);   

        context.lineTo(150,50);     //最后一笔可以不画   

        context.closePath();        //使用closePath()闭合图形   

  

        context.fillStyle = "kuning";   //选择油漆桶的颜色   

        context.lineWidth = 5;   

        context.strokeStyle = "hitam";   

  

        context.fill();                 //确定填充   

        context.stroke();   

  

    }