HTML5 Canvas
- Προηγούμενη σελίδα Αντικείμενα φόρμας HTML Input
- Προσθήκη σελίδας HTML5 SVG
Το στοιχείο canvas χρησιμοποιείται για τη δημιουργία γραφικών στο διαδίκτυο.
Τι είναι το Canvas;
Το στοιχείο canvas του HTML5 χρησιμοποιεί το JavaScript για τη δημιουργία εικόνων στην ιστοσελίδα.
Η πίνακας είναι μια ορθογώνια περιοχή, όπου μπορείτε να ελέγξετε κάθε pixel.
Το canvas διαθέτει πολλαπλές μεθόδους για την απόδοση γραφικών πътθειων, ορθογώνων, κύκλων, χαρακτήρων και προσθήκη εικόνων.
Δημιουργία στοιχείου Canvas
Προσθήκη στοιχείου canvas στην σελίδα HTML5.
Ορίζουμε το id, το πλάτος και το ύψος του στοιχείου:
<canvas id="myCanvas" width="200" height="100"></canvas>
Γραφηματογράφηση μέσω JavaScript
Το στοιχείο canvas δεν έχει ικανότητα γραφημάτων. Όλες οι εργασίες σχετικές με τα γραφήματα πρέπει να ολοκληρωθούν εντός του JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
Το JavaScript χρησιμοποιεί το id για να βρει το στοιχείο canvas:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，具有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
以下两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法具有参数 (0,0,150,75)。
这意味着：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
如图所示，画布的 X 和 Y 坐标用于在画布上定位绘画。
更多 Canvas 实例
以下是在 canvas 元素上绘画的更多实例：
实例 - 线条
通过指定起点和终点来绘制一条线：
Κώδικας JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Στοιχείο καμβά:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ο περιηγητής σας δεν υποστηρίζει το στοιχείο καμβά. </canvas>
实例 - 圆形
通过规定尺寸、颜色和位置来绘制一个圆：
Κώδικας JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Στοιχείο καμβά:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ο περιηγητής σας δεν υποστηρίζει το στοιχείο καμβά. </canvas>
实例 - 渐变
绘制渐变背景使用您指定的颜色：
Κώδικας JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Στοιχείο καμβά:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ο περιηγητής σας δεν υποστηρίζει το στοιχείο καμβά. </canvas>
Παράδειγμα - Εικόνα
Τοποθετήστε μια εικόνα στον καμβά:
Κώδικας JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Στοιχείο καμβά:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas. </canvas>
Εκμάθηση HTML Canvas
Για να μάθετε περισσότερα για το καμβά, επισκεφθείτε τον ιστότοπό μας Εκμάθηση HTML Canvas.
Σχετικές σελίδες
Περιγραφικό κείμενο:Ετικέτα HTML 5 <canvas>
Περιγραφικό κείμενο:Όνειρο HTML DOM Canvas
- Προηγούμενη σελίδα Αντικείμενα φόρμας HTML Input
- Προσθήκη σελίδας HTML5 SVG
