ציור צורות גאומטריות על התג <canvas>

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

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

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

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

ציור מרובעים על canvas

כדי לצייר מרובע כלשהו על קנבס נעשה שימוש במתודה rect שהיא חלק מהמתודות של ה - context. הצורה הכללית של המתודה היא:

context.rect(x, y, width, height);

המתודה rect מקבלת ארבעה ארגומנטים. בעזרת ה - x וה - y נגדיר את הפינה השמאלית העליונה של המרובע שלנו. עוד מקבלת המתודה את רוחב המרובע ואת גובהו.

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

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

</script>

   

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

דוגמה לציור מלבן ששטחו הפנימי מכוסה צבע

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

</script>

   

ציור עיגול על canvas

בדוגמת הקוד הבאה נצייר מעגל ונמלא את שטחו בצבע אדום:

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');

ctx.beginPath();
ctx.arc(75, 75, 70, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle='#FF0000';
ctx.fill();

</script>

   

ציור משולש על canvas

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

<script>

var canvas = document.getElementById('Canvas1');
var Context = canvas.getContext('2d');

Context.beginPath();
Context.moveTo(25,25);
Context.lineTo(105,25);
Context.lineTo(25,105);
Context.lineTo(25,25);
Context.fill();

Context.beginPath();
Context.moveTo(25,125);
Context.lineTo(125,35);
Context.lineTo(105,125);
Context.lineTo(25,125);
Context.stroke();

</script>

   


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