קורס Front-End Web Development שיעור תרגיל מסכם: לוח ציור


זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/html5-api-lab

למה להשתמש בשמירה בפונקציה הזו - toDataURL ולא בפונקציה getImageData שמגדירה את התמונה כמערך פיקסלים?

הכל שאלה של מה רוצים להשיג:

  1. הפונקציה toDataUrl נותנת את התמונה בתור מחרוזת שאפשר לקחת ולהעביר אותה לשרת או להשתמש בה בתור src של תמונה אחרת.

  2. הפונקציה getImageData מחזירה מערך של פיקסלים וזה עוזר אם רוצים לעשות מניפולציות על התמונה (למשל להפוך אותה לשחור-לבן)

לייק 1

הצלחתי לעשות את הנקודה איפה שלוחצים לגבי הקו שביקשת - זה לא עובד לי ואני לא מבין למה - אולי במקום קו אני צריך לצייר נקודות ? ואז יהיו הרבה נקודות לפי תזוזת העכבר - כי אם אני מזיז את העכבר לא בקו ישר?

בציור קו צריך לקחת כיוון אחר - באירוע mousedown להתחיל את הציור, באירוע mousemove לצייר את הנקודות בכל תנועה של העכבר ובאירוע mouseup להפסיק את הציור

אירוע click לא מתאים כאן כי הוא מתרחש רק אחרי שהפסקת את הלחיצה

לייק 1