masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Cara menggunakan kemahiran tutorial HTML5 canvas_html5

Cara menggunakan kemahiran tutorial HTML5 canvas_html5

WBOY
Lepaskan： 2016-05-16 15:45:36
asal
1952 orang telah melayarinya

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");
    4. var
  4. cct=c.getContext("2d"); cxt.fillStyle="#ccc"
    5. ;
  5. cxt.fillRect(5,10,150,60);
  6. Laksanakan seperti berikut:
    8. 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(
    2. "xyordinate"
  2. ).innerHTML="Koordinat: (" x
    3. ","
  3. y
    4. ")"
  4. ; }
  5. fungsi cnvs_clearCoordinates(){ document.getElementById("xyordinate").innerHTML="";}
    7. 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
    5. "teks/javascript"> var
  5. c=document.getElementById("myCanvas"); var
    6. cct=c.getContext(
  6. "2d"); cxt.fillStyle="#ccc";
    7. cxt.beginPath();
  7. cxt.arc(20,20,10,0,Math.PI*2,benar
    8. );
  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
    2. "teks/javascript"
  2. >
  3. var
    4. c=document.getElementById(
  4. "myCanvas"
    5. );
  5. var cct=c.getContext(
    6. "2d"
  6. ); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,
    7. "#000000"
  7. ); //Hitam grd.addColorStop(1,
    8. "#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
    1. "myCanvas" lebar="300" tinggi="200" gaya="sempadan:1px pepejal #c3c3c3;">
    2. Pelayar anda tidak menyokong teg kanvas
      5. "teks/javascript"> var
    5. c=document.getElementById("myCanvas"); var
      6. cct=c.getContext(
    6. "2d"); var img=
      7. 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 kanvas
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
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>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved