Ετικέτα HTML <canvas>

Ορισμός και χρήση

<canvas> Τα ετικέτες συνήθως σχεδιάζονται σε πραγματικό χρόνο μέσω σενάριων (συνήθως JavaScript).

<canvas> Τα ετικέτες είναι διαφανή, είναι απλώς κάδροι γραφικών, και απαιτείται να χρησιμοποιηθεί σενάριο για να σχεδιαστεί πραγματικά το γράφημα.

在禁用 JavaScript 的浏览器和不支持 <canvas> 的浏览器中，会显示出 <canvas> 元素内部的任何文本。

提示

请在我们的 HTML Canvas 教程中学习有关 <canvas> 元素的更多知识。

如需查看所有属性和方法的完整参考，请访问我们的 Εκπαιδευτικός Οδηγός Επεξεργασίας Canvas HTML.

实例

例子 1

实时绘制一个红色矩形，并在 <canvas> 元素中显示它：

<canvas id="myCanvas">
您的浏览器不支持 canvas 标签。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Δοκιμάστε το προσωπικά

例子 2

另一个 <canvas> 例子：

<canvas id="myCanvas">
您的浏览器不支持 canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// 打开透明度
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Δοκιμάστε το προσωπικά

属性

属性 值 描述
height 像素值 规定画布的高度。默认值为 150。
width 像素值 规定画布的宽度。默认值为 300。

全局属性

<canvas> 标签还支持 HTML 中的全局属性.

事件属性

<canvas> 标签还支持 HTML 中的事件属性.

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <canvas> Στοιχείο:

canvas {
  height: 150px;
  width: 300px;
}

Δοκιμάστε το προσωπικά

Η ιστορία του <canvas>

Ο στοιχείο HTML αυτό είναι σχεδιασμένο για το πελάτη βεληνεκούς γραφικά. Εξ ορισμού δεν έχει συμπεριφορά, αλλά δείχνει μια API σχεδιασμού στο πελάτη JavaScript ώστε το σενάριο να μπορεί να σχεδιάσει τα αντικείμενα που θέλει σε ένα καanvas.

Το σήμα <canvas> εισήχθη από την Apple στον περιηγητή Safari 1.3. Ο λόγος για αυτήν την ουσιαστική επέκταση του HTML είναι ότι η ικανότητα ζωγραφικής του HTML στο Safari χρησιμοποιείται επίσης από το Dashboard του Mac OS X, και η Apple θέλει να υπάρχει ένας τρόπος υποστήριξης γραφικών σε script στο Dashboard.

Οι περιηγητές Firefox 1.5 και Opera 9 ακολούθησαν την ηγεσία του Safari. Και οι δύο περιηγητές υποστηρίζουν το σήμα <canvas>.

Μπορούμε να χρησιμοποιήσουμε το σήμα <canvas> και στον IE, βασισμένο στο υποστήριξη VML του IE, και να δημιουργήσουμε συμβατότητα καμβά με ανοιχτού κώδικα JavaScript (από την Google). Δείτε επίσης:http://excanvas.sourceforge.net/.

Οι προσπάθειες τυποποίησης του <canvas> προχωρούν από μια μη επίσημη ένωση κατασκευαστών προγραμματιστών ιστοσελίδων, και σήμερα το <canvas> έχει γίνει ένας επίσημος τύπος στο πρότυπο HTML 5. Δείτε επίσης:http://www.whatwg.org/specs/web-apps/current-work/

Οι διαφορές μεταξύ του σήματος <canvas> και των SVG και VML

Μια σημαντική διαφορά μεταξύ του σήματος <canvas> και των SVG και VML είναι ότι το <canvas> έχει μια βάση API ζωγραφικής βασισμένη στο JavaScript, ενώ τα SVG και VML χρησιμοποιούν ένα έγγραφο XML για να περιγράψουν τη ζωγραφική.

Αυτές οι δύο μεθόδους είναι λειτουργικά ισοδύναμες, οποιαδήποτε μπορεί να μιμηθεί την άλλη. Από την εξωτερική τους εμφάνιση, είναι πολύ διαφορετικές, αλλά κάθε μία έχει τα δικά της πλεονεκτήματα και μειονεκτήματα. Για παράδειγμα, η ζωγραφική SVG είναι εύκολα επεξεργάσιμη, αρκεί να αφαιρεθούν τα στοιχεία από την περιγραφή της.

Για να αφαιρέσετε στοιχεία από την ίδια γεωμετρία ενός σήματος <canvas>, συχνά χρειάζεται να σβήσετε τη ζωγραφική και να την επαναζωγραφίσετε.

πώς να χρησιμοποιήσετε το σήμα <canvas> για ζωγραφική

Τα περισσότερα API ζωγραφικής του Canvas δεν ορίζονται στον ίδιο το στοιχείο <canvas>, αλλά στον κώδικα που χρησιμοποιείται για να διαχειριστεί τη ζωγραφική. η μέθοδος getContext()έχει αποκτήσει έναν αντικείμενο "περιβάλλοντος ζωγραφικής".

Η API του Canvas χρησιμοποιεί επίσης τη δήλωση διαδρομών. Ωστόσο, η διαδρομή ορίζεται από μια σειρά από κλήσεις μεθόδων, αντί να περιγράφεται ως αλφαριθμητική αλυσίδα, όπως οι κλήσεις των μεθόδων beginPath() και arc().

Μόλις οριστεί ο δρόμος, άλλες μεθόδους όπως το fill(), είναι για την επεξεργασία αυτού του δρόμου. Οι διάφορες ιδιότητες του περιβάλλοντος γραφιδιού, όπως το fillStyle, εξηγούν πώς χρησιμοποιούνται αυτές οι λειτουργίες.

Σημείωση:Μία από τις λόγους που το Canvas API είναι πολύ συνοπτικό είναι ότι δεν παρέχει καμία υποστήριξη για τη γραφή κειμένου. Για να προσθέσετε κείμενο σε ένα εικονικό γραφικό, πρέπει είτε να το σχεδιάσετε και να το συνδυάσετε με εικόνα bit, είτε να χρησιμοποιήσετε το CSS positioning για να καλύψετε το κείμενο HTML πάνω από το canvas.

Υποστήριξη περιηγητή

Ο αριθμός στη τάβλη αναφέρει την έκδοση του περιηγητή που υποστηρίζει πλήρως το στοιχείο.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0