Cara menggunakan kemahiran tutorial HTML5 canvas_html5

WBOY
Lepaskan: 2016-05-16 15:45:36
asal
1897 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
  5. cct=c.getContext("2d"); cxt.fillStyle="#ccc"
  6. ;
  7. cxt.fillRect(5,10,150,60);
  8. Laksanakan seperti berikut:
  9. 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"
  3. ).innerHTML="Koordinat: (" x
  4. ","
  5. y
  6. ")"
  7. ; }
  8. fungsi cnvs_clearCoordinates(){ document.getElementById("xyordinate").innerHTML="";}
  9. Kod XML/HTML
  10. 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
  3. "teks/javascript">
  4. var c=document.getElementById("myCanvas"); var
  5. cct=c.getContext("2d"); cxt.moveTo(10,10); //x,y titik permulaan
  6. cxt.lineTo(10,50); //x,y
  7. cxt.lineTo(50,50); //x,y
  8. cxt.lineTo(50,10); //x,y
  9. cxt.lineTo(10,10); //x,y
  10. cxt.stroke();
  11. 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
  3. "teks/javascript"> var
  4. c=document.getElementById("myCanvas"); var
  5. cct=c.getContext(
  6. "2d"); cxt.fillStyle="#ccc";
  7. cxt.beginPath();
  8. cxt.arc(20,20,10,0,Math.PI*2,benar
  9. );
  10. cxt.closePath();
  11. cxt.fill();
  12. 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"
  3. >
  4. var
  5. c=document.getElementById(
  6. "myCanvas"
  7. );
  8. var cct=c.getContext(
  9. "2d"
  10. ); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,
  11. "#000000"
  12. ); //Hitam grd.addColorStop(1,
  13. "#FFFFFF"
  14. ); //Putih
  15. cxt.fillStyle=grd; cxt.fillRect(5,10,175,50);//x,y,x,y
  16. Laksanakan seperti berikut:
  17. 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
    3. "teks/javascript"> var
    4. c=document.getElementById("myCanvas"); var
    5. cct=c.getContext(
    6. "2d"); var img=
    7. baharu
    8. Imej() img.src="aa.png"
    9. cxt.drawImage(img,10,20);
    10. Perlaksanaan adalah seperti berikut:
    11. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
    12. Teks asal: http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html
Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan