Cara menggunakan kemahiran tutorial HTML5 canvas_html5

elemen kanvas menggunakan JavaScript untuk melukis imej pada halaman web dan tidak mempunyai keupayaan melukis.

Kanvas ialah kawasan segi empat tepat yang boleh dikawal setiap piksel.

kanvas mempunyai banyak cara untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej.

Berikut ialah beberapa contoh:

1. Isi kanvas

Kod JavaScriptSalin kandungan ke papan keratan

1. "myCanvas" lebar="200" tinggi="100" style="sempadan:1px merah pepejal;">
2. "teks/javascript">
3. var c=document.getElementById("myCanvas");
var
4. cct=c.getContext("2d"); cxt.fillStyle="#ccc"
;
5. cxt.fillRect(5,10,150,60);
6. Laksanakan seperti berikut:
2. Dapatkan koordinat

Kod JavaScript

Salin kandungan ke papan keratan

"teks/javascript"

> 

fungsi

cnvs_getCoordinates(e){
1. x=e.clientX; y=e.klienY; document.getElementById(
"xyordinate"
2. ).innerHTML="Koordinat: (" x
","
3. y
")"
4. ; }
5. fungsi cnvs_clearCoordinates(){ document.getElementById("xyordinate").innerHTML="";}
Kod XML/HTML
7. Salin kandungan ke papan keratan
   1. <div id="coordiv" gaya="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout=="cnvs_clearCoordinates()">div>
   2. <div id="xyordinate" >div>

Laksanakan seperti berikut:

3 Lukis garisan dan grafik

1) Lukis segi empat sama seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

1. "myCanvas" lebar="200" tinggi="100" gaya="sempadan:1px pepejal #c3c3c3;">
2. Penyemak imbas anda tidak menyokong teg kanvas
5. "teks/javascript">
7. var c=document.getElementById("myCanvas"); var
8. cct=c.getContext("2d"); cxt.moveTo(10,10); //x,y titik permulaan
9. cxt.lineTo(10,50); //x,y
10. cxt.lineTo(50,50); //x,y
11. cxt.lineTo(50,10); //x,y
12. cxt.lineTo(10,10); //x,y
13. cxt.stroke();
15. Laksanakan seperti berikut

2) Lukis bulatan seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

1. "myCanvas" lebar="200" tinggi="100" gaya="sempadan:1px pepejal #c3c3c3;">
2. Pelayar anda tidak menyokong kanvas
"teks/javascript"> var
5. c=document.getElementById("myCanvas"); var
cct=c.getContext(
6. "2d"); cxt.fillStyle="#ccc";
cxt.beginPath();
7. cxt.arc(20,20,10,0,Math.PI*2,benar
);
8. cxt.closePath();
9. cxt.fill();
11. Laksanakan seperti berikut:
13. 4. Lukis kecerunan

Kod JavaScript

Salin kandungan ke papan keratan

"myCanvas"

lebar="200" tinggi=

"100"

1. gaya="sempadan:1px pepejal #c3c3c3;"> Pelayar anda tidak menyokong teg kanvas
"teks/javascript"
2. >
3. var
c=document.getElementById(
4. "myCanvas"
);
5. var cct=c.getContext(
"2d"
6. ); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,
"#000000"
7. ); //Hitam grd.addColorStop(1,
"#FFFFFF"
8. ); //Putih
9. cxt.fillStyle=grd; cxt.fillRect(5,10,175,50);//x,y,x,y
10. Laksanakan seperti berikut:
12. 5. Gambar Kod JavaScriptSalin kandungan ke papan keratan
13. 1. "myCanvas" lebar="300" tinggi="200" gaya="sempadan:1px pepejal #c3c3c3;">
    2. Pelayar anda tidak menyokong teg kanvas
    "teks/javascript"> var
    5. c=document.getElementById("myCanvas"); var
    cct=c.getContext(
    6. "2d"); var img=
    baharu
    7. Imej() img.src="aa.png"
    8. cxt.drawImage(img,10,20);
    9. Perlaksanaan adalah seperti berikut:
    10. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
    11. Teks asal: http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

Label berkaitan：

canvas html5 画布

sumber：php.cn

Artikel sebelumnya：HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial Artikel seterusnya：HTML5 Canvas的常用线条属性值总结_html5教程技巧

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

Artikel terbaru oleh pengarang

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...

daripada 2024-04-06 15:33:12

0

1

433

Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...

daripada 2024-04-05 12:57:00

0

1

456

Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...

daripada 2024-04-02 11:47:56

0

1

275

Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....

daripada 2024-04-01 20:42:38

0

1

259

Topik-topik yang berkaitan

Lagi>

• Apakah kaedah penghasilan penghasilan animasi html5?
• Perbezaan antara HTML dan HTML5
• apa itu pr
• penggunaan lokasi.muat semula
• Apakah kitaran hayat vue3
• Apakah mata wang PROM?
• Bagaimana untuk membuka fail exe
• localhost8080 tidak boleh mengakses penyelesaian