תגית
<canvas> נועדה ליצירת אזור שטוח בדף שבו ניתן לצייר גרפיקה בצורה דינמית באמצעות JavaScript. היא מספקת פתרון פשוט אך עוצמתי ליצירת תמונות, צורות, תרשימים, אנימציות ועוד.
שימוש בתגית <canvas>:
-
מיקום: מניחים את תגית
<canvas> במקום שבו רוצים ליצור אזור לציור גרפי בדף.
-
תכונות "width" ו-"height": קובעות את רוחב וגובה אזור ה-canvas. אם לא מוגדרים, הגודל המוגדר כברירת מחדל הוא 300 פיקסלים על 150 פיקסלים.
-
תכונה "style": ניתן להוסיף עיצובים נוספים כמו גבולות או צבעי רקע בעזרת CSS.
יצירת גרפיקה על canvas באמצעות JavaScript:
1. מקבלים את התייחסות ה-canvas מה-DOM באמצעות "document.getElementById".
2. מקבלים את ההקשר הגרפי (context) על ידי קריאה ל-"canvas.getContext("2d")" עבור ציור דו-ממדי.
3. משתמשים ב-API של ה-canvas לציור גרפיקה. לדוגמה, ניתן להשתמש ב-"fillRect" לציור מלבנים, ב-"beginPath" ו-"arc" לציור קווים ועיגולים, ועוד.
דוגמה לשימוש:
<html>
<head>
<title>דוגמה</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
</script>
</body>
</html>
בדוגמה זו, התגית
<canvas> יוצרת אזור לציור עם גובה ורוחב מוגדרים. בעזרת JavaScript, נוצר צבע מלא אדום על כל שטח ה-canvas באמצעות הפונקציה "fillRect".
