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

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：HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorialArtikel seterusnya：HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial

Artikel berkaitan

Lihat lagi

• AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
• HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
• HTML5 canvas 9绘制图片实例详解
• 正则表达式与HTML5新元素
• NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法