cari

Rumah  >  Artikel  >  hujung hadapan web  >  Cara melukis poligon seperti segi tiga dan segi empat tepat dengan petua tutorial HTML5 Canvas_html5

Cara melukis poligon seperti segi tiga dan segi empat tepat dengan petua tutorial HTML5 Canvas_html5

WBOY
WBOYasal
2016-05-16 15:51:501687semak imbas

Sifat dan kaedah utama objek CanvasRenderingContext2D yang diperlukan untuk melukis poligon menggunakan HTML5 Canvas (yang mempunyai "()" ialah kaedah) adalah seperti berikut:

属性或方法 基本描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y) 定义一个新的绘制路径的起点坐标
lineTo(int x, int y) 定义一个绘制路径的中间点坐标
stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的，则闭合该绘制路径。

Lukis segitiga

Kod JavaScriptSalin kandungan ke papan keratan
    4. "UTF-8"
  4. > Contoh Lukisan Kanvas HTML5 Bermula
    8. "myCanvas"
  8. lebar=
    9. "400px"
  9. tinggi=
    10. "300px"
  10. style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.
    12. "teks/javascript"
  12. >
  13. //Dapatkan objek Kanvas (kanvas)
  15. var kanvas = document.getElementById("myCanvas"
    16. );
  16. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
  17. jika(canvas.getContext){ 
    18. //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
  18.  
    19. var
  19. ctx = canvas.getContext("2d"); 
  20.  
    21. //Mulakan laluan lukisan baharu
  21. ctx.beginPath();
    22. //Tetapkan warna garisan kepada biru
  23. ctx.strokeStyle = "biru";
    25. //Tetapkan koordinat titik permulaan laluan
  25. ctx.moveTo(20, 50);
  26. //Lukis segmen garis lurus ke titik koordinat (60, 50)
    27. ctx.lineTo(20, 100);
  27. //Lukis segmen garis lurus ke titik koordinat (60, 90)
  28. ctx.lineTo(70, 100);
  29. //Tutup laluan lukisan dahulu. Ambil perhatian bahawa garis lurus akan digunakan untuk menyambungkan titik akhir semasa dan titik akhir permulaan.
    30. ctx.closePath();
  31. //Akhir sekali, lukis garis lurus mengikut laluan lukisan
    32. ctx.stroke();
    33. }

  35. Kesan paparan yang sepadan adalah seperti berikut:
    2016314112438272.png (421×318)

    Melukis segi empat tepat
    Sebab mengapa segi empat tepat lukisan Kanvas disebut secara berasingan adalah kerana objek berus Canvas-CanvasRenderingContext2D menyediakan kaedah khusus untuk melukis segi empat tepat.

    Kod XML/HTMLSalin kandungan ke papan keratan
    1. >
    2. <html>
    3. <kepala>
    4. <meta charset="UTF- 8"> 
    5. <tajuk>Contoh Segiempat Lukisan Kanvas HTML5 Bermula< / tajuk>
    6. kepala>
    7. <badan>
    10. <kanvas id="myCanvas" lebar="400px" tinggi="300px" gaya="sempadan: 1px merah pepejal;">
    11. Pelayar anda tidak menyokong teg kanvas.
    12. kanvas>
    14. <skrip taip="teks/ javascript">
    15. //Dapatkan objek Kanvas (kanvas)
    16. var kanvas = dokumen.getElementById("myCanvas");
      17. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Kanvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
      18. jika(canvas.getContext){
      19. //Dapatkan objek CanvasRenderingContext2D yang sepadan (berus)
      20. var
    20. ctx = kanvas.getContext("2d");  
    21. //Mulakan laluan lukisan baharu
    22. ctx.beginPath();
    23. //Tetapkan warna garisan kepada biru
      25. ctx.strokeStyle
    25. = "biru" //Menggunakan titik koordinat (10,10) dalam kanvas sebagai titik permulaan lukisan, lukis segi empat tepat dengan lebar 80px dan ketinggian 50px
    26. ctx.rect(10, 10, 80, 50);
      27. //Lukis garis lurus mengikut laluan yang ditentukan
      28. ctx.stroke();
      29. //Tutup laluan lukisan
      30. ctx.closePath();
      31. }
      33. skrip
    33. >
      34. badan
    34. >
      35. html
    35. > Kesan segi empat tepat yang sepadan dipaparkan seperti berikut:
Kenyataan：
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
Artikel sebelumnya：Cara menggunakan Kanvas HTML5 untuk melukis garisan seperti garis lurus atau kemahiran tutorial polylines_html5Artikel seterusnya：Cara menggunakan Kanvas HTML5 untuk melukis garisan seperti garis lurus atau kemahiran tutorial polylines_html5

Artikel berkaitan

Lihat lagi