html5-Canvas boleh melukis pelbagai grafik dalam kemahiran tutorial web_html5

Saya rasa perkara yang paling penting dalam HTML5 ialah pengenalan Kanvas, yang membolehkan kami melukis pelbagai grafik di web. Rasanya ini sahaja agak kabur antara program web dan desktop kami. Terdapat juga lukisan berasaskan xml dalam web di luar HTML5, seperti VML dan SVG. Kanvas ialah lukisan berasaskan piksel. Kanvas ialah nod html yang setara dengan papan lukisan Kita mesti menggunakan js untuk mengendalikan lukisan.
Seperti berikut:
Pelayar anda belum menyokong takrifan lagi.
Kita boleh mendapatkan objek kanvas sebagai var c=document.getElementById("myCanvas"); kaedah atribut jsnya disenaraikan di bawah:
1: Lukiskan objek rendering , c.getContext( " 2d"), untuk mendapatkan objek lukisan 2d, objek yang diperolehi akan menjadi objek yang sama tidak kira berapa kali kita memanggilnya.
2: Kaedah melukis :
clecrRect(kiri, atas, lebar, tinggi) mengosongkan kawasan segi empat tepat,
fillRect(kiri, atas, lebar, tinggi) melukis segi empat tepat, dan fillStyle fill.
fillText(teks,x,y) melukis teks;
strokeRect(kiri,atas,lebar,tinggi) melukis segi empat tepat dan melukis sempadan dengan gaya pukulan.
beginPath(): Mulakan lukisan laluan dan tetapkan semula laluan kepada keadaan awal; kedudukan ke koordinat semasa ;
moveTo(x, y): Tetapkan koordinat sebenar lukisan.
lineTo(x, y); Lukiskan garis lurus dari kedudukan sebenar semasa ke x, y.
fill(), stroke(), clip(): Selepas melengkapkan isian akhir dan garisan sempadan lukisan, klipkan kawasan tersebut.
arka(): lukis lengkok, kedudukan tengah, radian permulaan dan radian penamat untuk menentukan kedudukan dan saiz lengkok; imej;
quadraticCurveTo(): ​​​​Jalur spline kuadratik, parameter dua titik kawalan; data. ImageData merekodkan data lebar, ketinggian dan data, dengan data ialah rekod pigmen kami sebagai
argb, jadi panjang saiz tatasusunan ialah lebar*tinggi*4, dan susunannya ialah rgba. getImageData ialah untuk mendapatkan piksel bagi kawasan segi empat tepat, dan putImageData ialah untuk menetapkan piksel bagi kawasan segi empat tepat
... dan seterusnya!

3: Penjelmaan koordinat
:
terjemah (x, y): penjelmaan terjemahan, asalan bergerak ke koordinat (x, y>putar (a): penjelmaan putaran, putar sudut darjah;
skala (x, y): transformasi penskalaan; pulihkan timbunan muncul, pulihkan keadaan lukisan;
Baiklah, sudah terlambat. Dilampirkan ialah kod ujian saya:



Salin kod


Kodnya adalah seperti berikut:

menyemak imbas Penyemak imbas belum menyokongnya var x=10;

var y=10;

var maxheight=c.height-5;

var cxt=c.getContext("2d"); c. lebar,c.height);
var img=new Image(); >fungsi Refresh(){
cxt.clearRect(kiri, atas, lebar, tinggi); =- x;
}
jika((y atas)>(tinggi-tinggi)||yy=-y; x;
atas = atas y;
cxt.drawImage(img,kiri,atas,lebar,tinggi); , kiri, 25 teratas);
}
fungsi mula(){
jika(MyInterval==null){
MyInterval=setInterval("Refresh()",100);
}
fungsi stop(){
if(MyInterval!=null){
clearInterval(MyInterval=null;
}
}
fungsi InRectangle (x,y,rectx,recty,rwidth,rheight){
return (x>=rectx&&x=recty&&y}
c.onmouse = function(e){
if(InRectangle(e.clientX,e.clientY,kiri,atas,lebar,tinggi)){
stop();
}
c.onmouseout=function ( e){
mula();
}
c.onmousemove=function(e){
if(InRectangle(e.clientX,e.clientY,kiri,atas,lebar,tinggi) ) {
jika(Selang Saya!=null){
berhenti();
}
}lain{
mulakan(
}
}
}