קורס Front-End Web Development שיעור גרפיקה דו-מימדית canvas

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/canvas
#2

לא הבנתי בפונקציה הזו getImageData איפה התמונה בכלל ? עוד לא טענו כלל תמונה?

#3

זו התמונה שנמצאת עכשיו ב canvas. כדאי לקרוא את הטקסט בטאב ״טקסט״ שליד הסרטון כי יש שם הסבר בדיוק על זה.

#4

אבל אנחנו מציירים עליו ובקוד לא ציירנו כלום עדיין - ולכן הוא ריק

#5

כן עכשיו אני רואה את הבעיה-

  1. הקוד שמופיע בטאב טקסט הוא לא מה שמופיע בוידאו. הקוד מהוידאו זמין בקישור שנמצא ממש מתחת לוידאו:
    http://jsbin.com/homovu/1/edit?js,output

  2. הקוד בטאב ״טקסט״ שאתה מתיחס אליו הוא דוגמא לפונקציה grayscale. אין בקוד הפעלה של הפונקציה. אם אתה רוצה להשתמש בה אתה כמובן תצטרך לעשות את זה על canvas אחרי שציירת עליו.

לייק 1
#6

היי ינון,

אשמח להבין איך הפעולה הזו עובדת בדיוק- ctx.fillstyle= colors[ i % colors.length];

#7

נסי לרשום את הערכים של i ושל התוצאה של colors[i % colors.length] ותראי מה קורה כש i הופך גדול יותר מגודל המערך
(אני מזכיר שסימן ה % אומר ״שארית החלוקה״)