1 שילוב אנימציה באתר תזוזת אלמנט לפי טיימר ולוח צירים - BouncingBall כדור מקפץ בתוך מסגרת - אנימציה פשוטה וחישובי התנגשות בקיר <div id="wrapper" > <canvas id="canvasframe" width="400" height="300"></canvas> index.htm הגדרת מזהה לקנבאס, רוחב הקנבאס וכן אורך הקנבאס <script> init(); קריאה לפונקציה מקובץ Bounce.js </script> --------------------------------------------------------- StyleSheet.css body הצבע הטורקיז המוגדר כאן יהיה צבע דף ה- web הצבע הצהוב המוגדר כאן יהיה צבע הקנבאס וכן הקנבאס ימוקם באמצע דף ה- web background-color:aqua; #wrapper background-color:yellow; text-align:center; ------------------------------------------------------ bounce.js הצהרה על משתנים גלובליים, משתנים אלו יהי מוכרים בכל הפונקציות מיקום התחלתי של הכדור, בהמשך משתנים אלו יקבלו ערכים כתוצאה מחישובים בפונקציות כיוון תזוזת הכדור. חיובי ימינה, שלילי שמאלה שימוש במזהה הקנבאס טיימר - קריאה לפונקציה draw כל 11 מילישניות var canvasobj; var contextobj; var circlecenterx = 200; var circlecentery = 150; var dx = 1; var dy = 1; var radius=10; var WIDTH = 400; var HEIGHT = 300; function init() canvasobj = document.getelementbyid("canvasframe"); contextobj = canvasobj.getcontext("2d"); setinterval(draw, 10); הגדרה של אורך רוחב לפי מימדי הקנבאס, אנו נצייר מלבנים בגודל זה בהמשך כדי ל"מחוק" את מה שצוייר קודם ציור כדור לפי המיקום החדש שחושב כדי לדמות תזוזה, למעשה כל פעם יצוייר כדור נוסף שכבה על גבי שכבה. צבע הכדור יהיה לפי מה שהוגדר לפני הקריאה לפונקציה זו. function drawcircle() contextobj.arc(circlecenterx, circlecentery, radius, 0, 2 * Math.PI, false); ציור מלבן בגודל ברוחב ובמיקום של הקבנבאס, כד "למחוק" את מה שציור קודם למעשה כל פעם יצוייר מלבן נוסף שכבה על גבי שכבה. צבע המלבן יהיה לפי מה שהוגדר לפני הקריאה לפונקציה זו. function drawrect() contextobj.rect(0, 0, WIDTH,HEIGHT);
2 function draw() contextobj.fillstyle = "#FAF7F8"; drawrect(); contextobj.fillstyle = "#444444"; drawcircle(); קביעת צבע. קריאה לפונקציה. כאשר קובעים צבע ואז שולחים הפונקציה כברירת מחדל תצייר בצבע זה. למעשה מציירים מלבן בגודל ובצבע הקנבאס ועליו את העיגול )כדור( לפי הנתונים החדשים שחושבו, וכך זה נראה מעין תזוזה. if (circlecenterx + radius >= WIDTH) dx = -dx; if (circlecenterx - radius <= 0) dx = -dx; if (circlecentery + radius >= HEIGHT) dy = -dy; if (circlecentery - radius <= 0) dy = -dy; circlecenterx = circlecenterx + dx; circlecentery = circlecentery + dy; במידה ויש חריגה מגבולות הקנבאס, כיוון התנועה ישתנה הוספת 1 לציר X וכן הוספת 1 לציר y במידה ויש חריגה מהגבולות ישתנה הכיוון ע"י dx המשתנים הם גלובליים לכל התוכנית ולכן השינוי כאן משפיע על כל הפונקציות
3 שילוב אנימציה באתר אירוע לחיצת עכבר בקנבאס הודעה מוקפצת עם קורדינטות Y,X לפי מיקום עכבר בקנבאס onclickcoordinates index.htm <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> <script src="js/sod.js" type="text/javascript"></script> </head> <h1>onclickcordiates</h1> <div onclick="q()"> כל פעם שתהיה לחיצת עכבר, תתבצע קריאה לפונקציה q(event) <canvas id="canvasframe" width="400" height="400" ></canvas> </html> --------------------------------------------------------- sod.js function q(event) event = event window.event; var ctx = document.getelementbyid('canvasframe'); var sod1 = event.pagex - ctx.offsetleft; var sod2 = event.pagey - ctx.offsettop; sod1 sod2 ערך קורדינטת X ערך קורדינטת Y יכנס למשתנה יכנס למשתנה alert("sod1="+sod1+",sod2="+sod2); הודעה מוקפצת עם ערכי Y,X --------------------------------------------------------- StyleSheet.css #canvasframe background-color:#f418f1; רקע הקנבאס יקבע לפי קובץ זה
4 - תזוזת מלבן לפי מעבר העכבר שילוב אנימציה באתר תזוזת אלמנט לפי מעבר העכבר <div> <canvas id="canvasframe" width="400" height="300"></canvas> <script> var x = 50; var y = 50; var WIDTH = 400; var HEIGHT = 300; var color = 'black'; canvasobj = document.getelementbyid('canvasframe'); contextobj = canvasobj.getcontext('2d'); DrawRect(0, 0, WIDTH, HEIGHT, 'white'); DrawRect(x, y, 50, 40, 'black'); movemouse index.htm הגדרת מזהה לקנבאס, רוחב הקנבאס וכן אורך הקנבאס מיקום התחלתי של הכדור, בהמשך משתנים אלו יקבלו ערכים כתוצאה מחישובים בפונקציות הגדרה של אורך רוחב לפי מימדי הקנבאס, אנו נצייר מלבנים בגודל זה בהמשך כדי ל"מחוק" את מה שצוייר קודם משתנה המכיל צבע, נשתמש בו בהמשך לקביעת צבע הכדור document.onmousemove = HandleMouseMove; תמיד - כאשר העכבר יזוז יקרא לפונקציה HandleMouseMove(event) function HandleMouseMove(event) ev=event y = ev.pagey; x = ev.pagex; sod1 sod2 ערך קורדינטת X ערך קורדינטת Y יכנס למשתנה יכנס למשתנה DrawRect(0, 0, WIDTH, HEIGHT, 'white'); DrawRect(x, y, 50, 40, color); function DrawRect(x,y,w,h,c) contextobj.rect(x, y, w, h); contextobj.fillstyle = c; contextobj.linewidth = 7; contextobj.strokestyle = c; contextobj.stroke(); </SCRIPT> </html> --------------------------------------------------------- body background-color:green; canvas background-color:white; למעשה מציירים מלבן בגודל ובצבע הקנבאס ועליו מלבן שחור לפי הנתונים של "מעבר העכבר" החדשים שחושבו, וכך זה ציור שכבות המדמה תזוזה פונקציה המקבלת 4 פרמטרים ומציירת מלבן בהתאם. X מיקום תחילת המלבן, לפי קורדינת X זו - Y מיקום תחילת המלבן, לפי קורדינת Y זו - W רוחב המלבן h אורך המלבן - C צבע המלבן StyleSheet.css
5 ButtonAsciiCode שילוב אנימציה באתר תזוזת אלמנט לפי מקשי חצים שלב א' הודעה מוקפצת עם ערך אסקי של המקש שנלחץ <div> <canvas id="canvasframe" width="400" height="300"></canvas> <SCRIPT> canvasobj = document.getelementbyid('canvasframe'); contextobj = canvasobj.getcontext('2d'); הגדרת מזהה לקנבאס, רוחב הקנבאס וכן אורך הקנבאס document.onkeyup = DocOnkeyUpHandler; function DocOnkeyUpHandler() var e = event.keycode; alert(e); תמיד - כאשר נלחץ מקש יקרא לפונקציה DocOnkeyUpHandler() הודעה מוקפצת עם קוד אסקי של המקש שנלחץ </SCRIPT>
6 שילוב אנימציה באתר תזוזת אלמנט לפי מקשי חצים שלב ב' movebutton מלבן שזז לפי מקשי חצים ימין-שמאל-למעלה-למטה <div> <canvas id="canvasframe" width="400" height="300"></canvas> הגדרת מזהה לקנבאס, רוחב הקנבאס וכן אורך הקנבאס <SCRIPT> var x = 50; var y = 50; var WIDTH = 400; var HEIGHT = 300; מיקום התחלתי של מלבן, בהמשך משתנים אלו יקבלו ערכים כתוצאה מחישובים בפונקציות הגדרה של אורך רוחב לפי מימדי הקנבאס, אנו נצייר מלבנים בגודל זה בהמשך כדי ל"מחוק" את מה שצוייר קודם ולדמות תזוזה canvasobj = document.getelementbyid('canvasframe'); contextobj = canvasobj.getcontext('2d'); drewrect(0, 0, WIDTH, HEIGHT, 'white'); drewrect(x, y, 50, 40, 'black'); document.onkeyup = doconkeyuphandler; במקלדת טיפול// doconkeyuphandler() function var e = event.keycode; //alert(e); ציור ראשוני של מלבן לפי מימדי הקנבאס ועליו ציור של ריבוע שחור תמיד כשמקש ישוחרר למעלה יקרא לפונקציה למשתנה e יכנס ערך אסקי של המקש שנלחץ לפי ערך זה מתקדמים ב- 11 לכיוון המתאים. if (e == 40) y += 10; if (e == 38) y -= 10; if (e == 37) x -= 10; if (e == 39) x += 10; drewrect(0, 0, WIDTH, HEIGHT, 'white'); drewrect(x, y, 50, 40, 'black'); function drewrect(x,y,w,h,c) contextobj.rect(x, y, w, h); contextobj.fillstyle = c; contextobj.linewidth = 7; contextobj.strokestyle = c; contextobj.stroke(); הדמיית תזוזה ציור בשכבות ציור של מלבן לפי מימדי הקנבאס ועליו ציור של ריבוע שחור לפי חישובי x,y מקשי חיצים פונקציה המקבלת 4 פרמטרים ומציירת מלבן בהתאם. X מיקום תחילת המלבן, לפי קורדינת X זו - Y מיקום תחילת המלבן, לפי קורדינת Y זו - W רוחב המלבן h אורך המלבן - C צבע המלבן </SCRIPT>
7 - beginpath - closepath כאשר מבצעים 2 ביצועים של אלמנטים ללא beginpath וללא closepath canvas חושב שמדובר בהמשך של אותו אלמנט, ומשרטט זאת כהמשך. למעשה ה- אם מעוניינים ב- 2 ביצועים שונים של אותו אלמנט, יש לתת הוראה שמסבירה שסיימנו אלמנט קודם closepath וכן שהתחלנו אחד חדש beginpath כדוגמא, ציירו 2 עיגולים ללא אנימציה בקורדינטות שונות. ציור 2-1 עיגולים עם ההוראות beginpath וכן closepath עבור כל אלמנט ציור 2-2 עיגולים ללא ההוראות beginpath וכן closepath התוצאה שונה לגמרי, במידה ולא פותחים-סוגרים אלמנט, יצוייר המשך של אותה הצורה, ולכן באנימציה נקפיד לפתוח ולסגור כל אלמנט. לסיכום, באנימציה, בשונה מציור חד פעמי השיטה beginpath וכן closepath הינם הכרחיות.
8 הסבר פרוייקט moveroundframe -------------------------------------------------------------- - Index.html <div id="wrapper" > <canvas id="canvasframe" width="400" height="300"></canvas> <script> start(); </script> -------------------------------------------------------------- - moveroundframe.js var canvasobj;// = Canvas.vsGet(document.getElementById("canvasFrame")); ; var contextobj; var circlecenterx = 10; var circlecentery = 10; var dx = 1; var dy = 1; var radius=10; var WIDTH = 400; var HEIGHT = 300; var delta = 2; function start() alert("start"); dx = delta; dy = 0; canvasobj = document.getelementbyid("canvasframe"); contextobj = canvasobj.getcontext("2d"); setinterval(draw, 10); function drawcircle() contextobj.arc(circlecenterx, circlecentery, radius, 0, 2 * Math.PI, false); function drawrect() contextobj.rect(0, 0, WIDTH,HEIGHT); function clearcanvas() contextobj.clearrect(circlecenterx, circlecentery, WIDTH, HEIGHT);
9 function draw() contextobj.fillstyle = "red"; drawrect(); contextobj.fillstyle = "green"; drawcircle(); פינה ימנית עליונה// if ((circlecenterx + radius >= WIDTH )&& (circlecentery - radius<=0) ) dx = 0; dy = delta; פינה ימנית תחתונה// if ((circlecentery + radius >= HEIGHT) && (circlecenterx + radius >= WIDTH)) dy = 0; dx = -delta; פינה שמאלית תחתונה// if ((circlecenterx - radius <= 0 ) && (circlecentery + radius >= HEIGHT )) dx = 0; dy = -delta; פינה שמאלית עליונה // if ((circlecentery - radius <= 0 ) && (circlecenterx - radius <= 0 ) ) dy = 0; dx=delta; circlecenterx = circlecenterx + dx; circlecentery = circlecentery + dy; התחלה +dx,0 0, dy 0,-dy -dx,0
11 הסבר פרוייקט catchtheclown -------------------------------------------------------------- - Index.html <h1>catchtheclown</h1> <div> <canvas id="canvasframe" width="400" height="400" ></canvas> <script> start(); </script> -------------------------------------------------------------- - catchtheclown.js var WIDTH = 400; var HEIGHT = 400; var clownwidh = 60; var clownheight = 60; var canvascolor = "#F418F1"; var clowncolor = "blue"; var x1=100; var y1=50; var x2=300; var y2 = 200; var canvasobj; var contextobj; document.onmousedown = q; function start() canvasobj = document.getelementbyid("canvasframe"); contextobj = canvasobj.getcontext("2d"); drawrect(x1, y1, clownwidh, clownheight, clowncolor); offset מחזיר היסט בין הקנבאס לתחילת המסך בפיקסלים - pagex/y קורדינטות מוחלטות של לחיצת עכבר ביחס לשטח המסך ההפרש ביניהם נותן את קורדינטות מיקום הלחיצה ביחס למשטח function q(event) event = event window.event; var xm = event.pagex - canvasobj.offsetleft; var ym = event.pagey - canvasobj.offsettop; if ((xm <= (x1 + clownwidh) && xm >= x1) && (ym >= y1 && ym <= (y1 + clownheight))) a = x2; בדיקה אם אנו בנקודה - x1,y1 אם כן נעבור ל- x2,y2
11 b = y2; clowncolor = 'green' else if ((xm <= (x2 + clownwidh) && xm >= x2) && (ym >= y2 && ym <= (y2 + clownheight))) a = x1; x2,y2 b = y1; clowncolor = 'yellow' else a = x1; b = y1; alert('you should press inside the box!') clearcanvas(); drawrect(a, b, clownwidh, clownheight, clowncolor); function clearcanvas() drawrect(0, 0, WIDTH, HEIGHT, canvascolor); function drawrect(x, y, w, h, color) contextobj.fillstyle = color; contextobj.rect(x, y, w, h); contextobj.stroke(); בדיקה אם אנו בנקודה - x1,y1 אם כן נעבור ל- בדיקה אם אנו לוחצים מחוץ לליצן