صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

جافا سكريبت - JavaScript

موقع كتابة الكود repl.it | تحميل Brackets| تحميل Notebad++

(5) خصائص الـ JavaScript

القماش - canvas

שאלה: (מצגת יום עיון, 2017)

<html>

<body>

<canvas id="canvasFrame" width="400" height="400"
style="background-color:blue"

onClick="quiz()">

</canvas>

var elem = document.getElementById('canvasFrame');

var ctx = elem.getContext('2d');

function quiz(event) {

event = event || window.event;

var ctt = document.getElementById('canvasFrame');

var xM = event.pageX - ctt.offsetLeft;

var yM = event.pageY - ctt.offsetTop;

ctx.fillStyle = "red";

ctx.fillRect(xM, yM, 50, 50);

}

</script> </body></html>

לפניכם קטע הקוד. מה מבצע קטע קוד זה ? _______________________

במידה והריצו קוד זה והקליקו 4 פעמים בעכבר ולחצו על מקש חץ ימינה 8 פעמים.

מה יצוייר ?______

פתרון:

לפניכם קטע הקוד המציג על המסך ריבוע בצבע אדום במקום שבו מקליקים בעכבר.

צלע כל בריבוע 50 פיקסלים.

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019