Cara menggunakan Kanvas HTML5 untuk melukis garisan seperti garis lurus atau kemahiran tutorial polylines

Penjelasan tentang konsep asas HTML5 Canvas
html5, ini tidak sepatutnya memerlukan sebarang pengenalan, kerana mana-mana pembangun mesti biasa dengannya. HTML5 ialah standard teknologi web "muncul" Pada masa ini, kecuali untuk IE8 dan ke bawah, hampir semua penyemak imbas arus perdana (FireFox, Chrome, Opera, Safari, IE9) telah mula menyokong HTML5. Di samping itu, dalam pasaran penyemak imbas mudah alih, banyak penyemak imbas mudah alih juga telah melancarkan perlumbaan senjata mengenai "keupayaan dan prestasi sokongan HTML5." Sebagai piawaian teknologi web yang revolusioner, html, ditambah dengan sokongan padu daripada banyak pengeluar atau organisasi penyemak imbas, boleh dibayangkan bahawa html5 akan menjadi peneraju teknologi web pada masa hadapan.

html5, yang dikatakan "muncul", sebenarnya bukanlah sesuatu yang baharu. Lagipun, draf rasmi pertama html5 telah diumumkan seawal tahun 2008. Mengira dari tahun 2008, sudah agak lama sekarang. Walau bagaimanapun, setakat ini, bagi kebanyakan pembangun, ia masih "gemuruh besar tetapi sedikit hujan" - terdapat ramai orang yang mendengar tentang HTML5, tetapi sangat sedikit yang benar-benar menggunakan HTML5.

Seperti yang kita sedia maklum, banyak ciri baharu telah ditambahkan pada html5. Di antara banyak ciri html5, Kanvas harus dianggap sebagai salah satu ciri baharu yang paling menarik perhatian. Kami menggunakan objek Kanvas html5 untuk melukis grafik terus pada halaman web penyemak imbas. Ini bermakna penyemak imbas boleh memaparkan grafik atau animasi terus pada halaman web tanpa pemalam pihak ketiga seperti Flash.

Sekarang, mari kita perkenalkan kepada pemula html5 cara menggunakan Kanvas html5 untuk melukis grafik asas.

Pertama, kita perlu menyediakan kod html asas berikut:

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html>
<kepala>
<meta charset="UTF- 8">
<tajuk>Contoh Permulaan Kanvas HTML5tajuk>
kepala>
<badan>
badan>
html>

Kod di atas ialah templat kod asas untuk halaman html5. Antaranya, baris pertama kod ialah arahan teg jenis dokumen, yang juga merupakan arahan jenis dokumen standard untuk halaman html5 Ia digunakan untuk memberitahu pelayar "Ini adalah halaman html5. Sila huraikan dan paparkannya mengikut piawaian halaman web html5." halaman ini". Baris keempat kod digunakan untuk memberitahu penyemak imbas "pengekodan aksara halaman html5 ini ialah UTF-8 Ini juga merupakan cara standard untuk menulis pengekodan aksara untuk html5 laman web. Ini berbeza daripada arahan pengekodan aksara HTML sebelumnya.

Kod XML/HTMLSalin kandungan ke papan keratan

<meta http-equiv=" Jenis Kandungan" kandungan="text/html;charset=UTF-8">

Sekarang, kami akan menerangkan contoh grafik lukisan Kanvas dalam fail html yang mengandungi kod di atas. Mula-mula, kami menambah teg kanvas berikut pada bahagian badan kod html di atas.

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html>
<kepala>
<meta charset="UTF- 8">
<tajuk>Contoh Permulaan Kanvas HTML5tajuk>
kepala>
<badan>
<kanvas id="myCanvas" lebar="400px" tinggi="300px" gaya="sempadan: 1px merah pepejal;">
Pelayar anda tidak menyokong teg kanvas.
kanvas>
badan>
html>

Pada masa ini, jika kami menggunakan penyemak imbas yang menyokong HTML5 untuk membuka halaman, kami akan melihat kandungan berikut:
2016314110155998.png (455×321)

Dalam HTML5, teg kanvas itu sendiri tidak mempunyai sebarang tingkah laku, ia hanya menempati saiz ruang kosong yang ditentukan pada halaman. Teg kanvas adalah bersamaan dengan kanvas kosong Kami juga perlu menggunakan API kanvas yang disediakan oleh JavaScript untuk menulis kod yang sepadan untuk melukis grafik yang kami inginkan pada kanvas ini.

Nota: Kandungan teks dalam teg kanvas akan dipaparkan dalam penyemak imbas yang tidak menyokong HTML5. Seperti yang ditunjukkan dalam kod HTML di atas, jika penyemak imbas anda tidak menyokong teg kanvas HTML5, teks "Pelayar anda tidak menyokong teg kanvas" akan dipaparkan pada teg kanvas.
Sebagai "pelukis", pertama sekali kita perlu membiasakan diri dengan berus di tangan kita, iaitu objek Canvas dalam JavaScript dan kandungan yang berkaitan dengannya.

Dalam HTML5, teg kanvas sepadan dengan objek Kanvas Kita boleh menggunakan fungsi biasa seperti document.getElementById() dalam JavaScript untuk mendapatkan objek. Perlu diingat bahawa dalam JavaScript, kami tidak mengendalikan objek Canvas secara langsung, tetapi mendapatkan objek konteks lukisan grafik yang sepadan CanvasRenderingContext2D melalui objek Canvas, dan kemudian kami menggunakan banyak fungsi lukisan grafik yang disertakan dengan objek CanvasRenderingContext2D untuk dilukis.

Ia seperti setiap kanvas sepadan dengan berus Jika kita ingin melukis di atas kanvas, kita mesti mendapatkan berus yang sepadan dahulu, dan kemudian menggunakan berus ini untuk melukis di atas kanvas. Objek CanvasRenderingContext2D adalah setara dengan berus ini. Sekarang, mari cuba dapatkan berus ini dalam JavaScript.

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html>
<kepala>
<meta charset="UTF- 8">
<tajuk>Contoh Permulaan Lukisan Garis Kanvas HTML5< / tajuk>
kepala>
<badan>
<kanvas id="myCanvas" lebar="400px" tinggi="300px" gaya="sempadan: 1px merah pepejal;">
Pelayar anda tidak menyokong teg kanvas.
kanvas>
<skrip taip="teks/ javascript">
//Dapatkan objek Kanvas (kanvas)
var kanvas = dokumen.getElementById("myCanvas");
ctx = kanvas.getContext("2d"); }

skrip

> badan> html>

Seperti yang ditunjukkan dalam kod di atas, kita boleh menggunakan kaedah getContext() bagi objek Canvas untuk mendapatkan objek CanvasRenderingContext2D. Pembaca yang lebih prihatin sepatutnya menyedari: kaedah getContext() perlu dihantar dalam rentetan - 2d, dan nama objek CanvasRenderingContext2D yang diperoleh juga mengandungi 2D. Ini kerana pada masa ini html5 hanya menyokong lukisan 2D, tetapi 3D atau bentuk lukisan lain juga mungkin disokong dalam html5 akan datang. Pada masa itu, kita mungkin perlu menggunakan getContext("3d") untuk mendapatkan objek CanvasRenderingContext3D dan melukis grafik 3D.

Gunakan kanvas html5 untuk melukis garisan (garisan lurus, garis poli, dll.)
Sifat dan kaedah utama objek CanvasRenderingContext2D yang diperlukan untuk melukis garis lurus menggunakan html5 Canvas (yang mempunyai "() " adalah kaedah) adalah seperti berikut:

属性或方法	基本描述
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha	定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap	指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。
beginPath()	开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
moveTo(int x, int y)	移动画笔到指定的坐标点`(x,y)`，该点就是新的子路径的起始点
lineTo(int x, int y)	使用直线连接当前端点和指定的坐标点`(x,y)`
stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
closePath()	如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

Dalam proses lukisan grafik Kanvas, kami hampir selalu menetapkan beberapa titik koordinat dalam susunan tertentu, iaitu laluan lukisan yang dipanggil, dan kemudian menyambungkan titik koordinat ini dengan cara yang ditentukan mengikut keperluan kami bentuk yang kita perlukan. Selepas kami memahami API objek CanvasRenderingContext2D di atas, melukis garisan menjadi sangat mudah.

Gunakan kanvas untuk melukis garis lurus asas

Kini, kami menggunakan kanvas untuk melukis garis lurus yang paling asas.

Kod JavaScriptSalin kandungan ke papan keratan

"UTF-8"

> Contoh Garis Lukisan Kanvas HTML5

"myCanvas"

lebar=

"400px"

tinggi=

"300px"

style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.

"teks/javascript"

//Dapatkan objek Kanvas (kanvas)

var kanvas = document.getElementById("myCanvas"

);

//Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5

jika(canvas.getContext){

//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan

var

ctx = canvas.getContext("2d");

//Perhatikan bahawa sistem koordinat Kanvas ialah: sudut kiri atas kanvas Kanvas ialah asal (0,0), absis di sebelah kanan, ordinat ialah bawah, dan unitnya ialah piksel (px).

//Mulakan laluan lukisan baharu

ctx.beginPath();

//Tentukan koordinat titik permulaan bagi garis lurus sebagai (10,10)

ctx.moveTo(10, 10);

//Takrifkan koordinat titik akhir bagi garis lurus sebagai (50,10)

ctx.lineTo(50, 10);

//Lukis garis lurus di sepanjang laluan susunan titik koordinat

ctx.stroke();

//Tutup laluan lukisan semasa

ctx.closePath();

}

Kesan paparan adalah seperti berikut:
2016314110545325.png (473×319)

Gunakan kanvas untuk melukis garis lurus berwarna

Seperti yang kita tahu, di dunia nyata, berus juga pelbagai dan mempunyai pelbagai warna. Begitu juga, objek Canvas brush CanvasRenderingContext2D juga boleh mempunyai pelbagai warna yang anda perlukan. Dalam contoh kod di atas, jika kita tidak menentukan warna, berus Kanvas akan menjadi lalai kepada hitam yang paling biasa.

Kini kami menggunakan berus Kanvas sekali lagi untuk melukis garis lurus berwarna biru (berdasarkan kesederhanaan halaman, hanya kod JavaScript utama diberikan di bawah, sila rujuk juga contoh kod lengkap di atas).

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html>
<kepala>
<meta charset="UTF- 8">
<tajuk>Contoh Permulaan Lukisan Garis Kanvas HTML5< / tajuk>
kepala>
<badan>
<kanvas id="myCanvas" lebar="400px" tinggi="300px" gaya="sempadan: 1px merah pepejal;">
Pelayar anda tidak menyokong teg kanvas.
kanvas>
<skrip taip="teks/ javascript">
//Dapatkan objek Kanvas (kanvas)
var kanvas = dokumen.getElementById("myCanvas");
ctx = kanvas.getContext("2d");
//Mulakan laluan lukisan baharu
ctx.beginPath();
//Takrifkan koordinat titik permulaan bagi garis lurus sebagai (10,10)
ctx.moveTo(10, 10);
//Lukis garis lurus di sepanjang laluan susunan titik koordinat
ctx.stroke();
//Tutup laluan lukisan semasa
ctx.closePath();
//Lukis garis lurus dengan warna
ctx.moveTo(10, 30);
//Sokong pelbagai ungkapan nilai warna css, seperti: "biru", "#0000ff", "#00f", "rgb(0,0,255)", "rgba(0,0,255, 1) )"
// Pelbagai tetapan seperti warna mesti dipanggil sebelum lejang fungsi lukisan akhir()
=
;
ctx.stroke(); //Tutup laluan lukisan semasa ctx.closePath();
}

skrip

badan>
html>
Kesan paparan yang sepadan adalah seperti berikut: Gunakan kanvas untuk melukis garis poli asas

Kod JavaScript
2016314110709116.png (433×316) Salin kandungan ke papan keratan

"teks/javascript">
//Dapatkan objek Kanvas (kanvas)
var kanvas = document.getElementById("myCanvas");
//Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
jika(canvas.getContext){
//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
var ctx = canvas.getContext("2d");
//Mulakan laluan lukisan baharu
//Tetapkan warna garisan kepada biru
"biru";
//Tetapkan koordinat titik permulaan laluan
ctx.lineTo(60, 50);
//Takrifkan koordinat titik perantaraan 2
ctx.lineTo(60, 90);
ctx.lineTo(100, 90); //Sambungkan titik koordinat dalam susunan laluan yang dilukis
//Tutup laluan lukisan
}
Der entsprechende Anzeigeeffekt ist wie folgt:

Nachdem Sie die oben genannten Inhalte gemeistert haben, glaube ich, dass Sie über ein grundlegendes Verständnis für die Verwendung von Canvas zum Zeichnen von Linien verfügen. Da die Steuerung von Linienbreite, Transparenz usw. nur das Festlegen eines einzelnen Attributs erfordert, beziehen Sie sich bitte auf die entsprechende API oben und gehen hier nicht auf Details ein.

Wichtiger Hinweis: Achten Sie beim Zeichnen eines Grafikpfads darauf, zuerst beginPath() aufzurufen. Die Methode beginPath() löscht die vorherigen Zeichenpfadinformationen im Speicher. Wenn Sie dies nicht tun, hat dies möglicherweise keine Auswirkungen auf das Zeichnen einer einzelnen Form. Wenn Sie jedoch mehrere Formen zeichnen (z. B. die beiden geraden Linien im obigen Beispiel), führt dies zu unerwarteten Ergebnissen bei Vorgängen wie dem Zeichnen von Pfaden oder Farbfüllung.
Außerdem müssen Anfänger ein wenig auf die Methode closePath() achten, insbesondere auf den roten Text in der Beschreibung der Methode closePath() in der API-Tabelle oben. Im obigen Codebeispiel zum Zeichnen einer Polylinie haben wir zuerst Stroke() und dann ClosePath() aufgerufen. Tatsächlich wurde beim Aufruf der Methode „Stroke()“ die Polylinie bereits gezeichnet und der aktuelle Zeichenpfad geschlossen. Wenn die Methode „ClosePath()“ erneut aufgerufen wird, wird daher keine gerade Linie zum Verbinden des aktuellen Pfads verwendet Endpunkt und Startendpunkt (Mit anderen Worten, closePath() ist hier optional, aber um gute Gewohnheiten beizubehalten, wird dennoch empfohlen, es zu schreiben). Wenn wir die Reihenfolge der Aufrufe von Stroke() und ClosePath() vertauschen, ist die Situation völlig anders. Da closePath() zuerst aufgerufen wird und der Zeichenpfad zu diesem Zeitpunkt noch nicht geschlossen ist, verbindet closePath() den aktuellen Endpunkt und den Startendpunkt durch eine gerade Linie.

Der Beispielcode nach dem Austausch der Aufrufreihenfolge von Stroke() und ClosePath() lautet wie folgt:

Nach dem Austausch der Aufrufreihenfolge ist der entsprechende Anzeigeeffekt wie folgt:

Cara menggunakan Kanvas HTML5 untuk melukis garisan seperti garis lurus atau kemahiran tutorial polylines_html5