HTML5 - ציור קווים על התג <canvas>

התג canvas כפיי שמעיד עליו שמו אינו אלא תג המתנהג כמו בד (קנבאס) ציור. ואם בציור עסקינן אזי אבן היסוד בכל ציור היא הקו. כדי לצייר קווים על התג <canvas>  ב - HTML5 יהיה עלינו להשתמש בצירוף של מספר מתודות (methods) שהן חלק מהקונטקסט (context) של ה -  canvas.

פירוט המתודות השכיחות יותר, שבהן עושים שימוש לצורך ציור קווים בעזרת קוד על התג <canvas>.

מתודהתיאור פעילות המתודה
beginPathמתודה זו מאתחלת (reset) את הנתיב (path) הנוכחי
moveToבעזרת מתודה זו נפתח תת נתיב חדש ונגדיר את נקודת ההתחלה של הקו שברצוננו לצייר. מתודה זו מקבלת כפרמטרים את ערכי ציר הרוחב (x) וציר הגובה (y) של הנקודה.
closePathמתודה זו תסגור את תת הנתיב הנוכחי.
fillמתודה זו תמלא את הנתיב הנוכחי על פי סגנון המילוי שנבחר.
strokeמתודה זו כמוה כמשיכת מכחול בנתיב שהוגדר ובסגנון שהוגדר.
lineToבעזרת מתודה זו נגדיר את הנקודה הבאה בנתיב. שימוש בה יגרום למתיחת קו ישר מהנקודה הקודמת לנקודה החדשה שהיא מגדירה. מתודה זו מקבלת כפרמטרים את ערכי ציר הרוחב (x) וציר הגובה (y) של הנקודה.

הערה: חשוב לזכור שב - Javascript חייבים להשתמש בשמות של המתודות כפי שהן, תוך הקפדה על אותיות לועזיות גדולות וקטנות.

ציור קו על canvas

בדוגמה הבאה נצייר קו על קנבס. לשם כך נעשה שימוש בחלק מן המתודות המתוארות למעלה:

<script>
// תחילה נשיג פוינטר לאלמנט הקנבס שעליו ברצוננו לצייר
var canvas = document.getElementById('Canvas1');
var context = canvas.getContext('2d');
// מנקודה זו אנו מתחילים לצייר את הקו
context.beginPath();
context.moveTo(100, 50);
context.lineTo(100, 150);
context.stroke();

</script>

   

בדוגמת הקוד שלמעלה ציירנו קו מאונך על אלמנט canvas שה - id שלו הוא "canvas1".  כרגיל את הציור אנו מבצעים על ה - context של הקנבס. את נקודת ההתחלה של הקו קבענו באמצעות המתודה ()moveTo. את נקודת הסיום של הקו קבענו באמצעות המתודה ()lineTo. הפקודה המציירת בפועל את הקו היא ()stroke.

שליטה על עובי הקו

כדי לשלוט על עובי הקו נשתמש בתכונה של ה - context של האלמנט canvas הנקראת lineWidth.

<script>
// תחילה נשיג פוינטר לאלמנט הקנבס שעליו ברצוננו לצייר
var canvas = document.getElementById('Canvas1');
var context = canvas.getContext('2d');
// מנקודה זו אנו מתחילים להגדיר ולצייר את הקו
context.lineWidth=20;
context.beginPath();
context.moveTo(100, 50);
context.lineTo(100, 150);
context.stroke();

</script>

   

שליטה על צבע הקו

התכונה ()strokeStyle היא  תכונה אחרת של ה - context של אלמנט מסוג canvas. תכונה זו מאפשרת לנו לשלוט על צבע הקו.

<script>
// תחילה נשיג פוינטר לאלמנט הקנבס שעליו ברצוננו לצייר
var canvas = document.getElementById('Canvas1');
var context = canvas.getContext('2d');
// מנקודה זו אנו מתחילים להגדיר ולצייר את הקו
context.lineWidth=20;
context.strokeStyle = '#ff0000';
context.beginPath();
context.moveTo(100, 50);
context.lineTo(100, 150);
context.stroke();

</script>

   

ציור קו בעל קצוות מעוגלים

בדוגמת הקוד הבאה נצייר קו בעל קצוות מעוגלים. כדי לעשות זאת נשתמש בתכונה של ה - context הנקראת lineCap. תכונה זו יכולה לקבל את הערכים הבאים:

  • butt
  • round
  • square
<script>
// תחילה נשיג פוינטר לאלמנט הקנבס שעליו ברצוננו לצייר
var canvas = document.getElementById('Canvas1');
var context = canvas.getContext('2d');
// מנקודה זו אנו מתחילים להגדיר ולצייר את הקו
context.lineWidth=20;
context.strokeStyle = '#ff0000';
context.lineCap = 'round';
context.beginPath();
context.moveTo(100, 50);
context.lineTo(100, 150);
context.stroke();

</script>

   

 


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש