في هذا الشيفرة، تحاول تعيين حدث onclick إلى سياق الرسم ctx في الكانفاس، ولكن هناك خطأ في الكود يجب تصحيحه. يمكنني أن أقدم لك شرحاً مفصلاً حول كيفية تحقيق هذا الهدف.
أولاً، يجب أن تعلم أن ctx هنا هو سياق الرسم في الكانفاس، وهو ليس عنصر HTML الذي يمكنك تعيين له حدث onclick مباشرة. بدلاً من ذلك، يمكنك استخدام حدث onclick المتاح لعنصر الكانفاس ذاته.
لتحقيق ذلك، يمكنك تعديل الشيفرة على النحو التالي:
htmlhtml>
<html>
<head>
head>
<body>
<div id="type">div>
<canvas id="ctx2" width="500" height="500" style="border: solid 1px;">canvas>
<script>
var canvas = document.getElementById("ctx2");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2*Math.PI);
ctx.stroke();
canvas.onclick = function() {
displayDate();
};
function displayDate() {
document.getElementById("type").innerHTML = Date();
}
document.getElementById("type").innerHTML = typeof ctx;
script>
body>
html>
في هذا التعديل، تم تعيين حدث onclick مباشرة إلى العنصر canvas، وعند النقر على الكانفاس، سيتم تنفيذ وظيفة displayDate() التي تقوم بعرض التاريخ في العنصر ذو الهوية “type”.
المزيد من المعلومات
بالطبع، دعنا نقوم بفحص الشيفرة بشكل أعمق ونقدم بعض التوضيحات حول العناصر المختلفة في الشيفرة:
-
العنصر Canvas:
- يتم استخدام
لرسم الرسومات في الواجهات الرسومية للويب. - تم تحديد هوية الكانفاس بـ “ctx2” وتم تعيين عرض وارتفاع له.
- يتم استخدام
-
سياق الرسم (Context):
var ctx = document.getElementById("ctx2").getContext("2d");تحصل على سياق الرسم 2D للكانفاس.ctx.beginPath();تبدأ رحلة رسم الشكل.
-
رسم دائرة:
ctx.arc(100, 75, 50, 0, 2*Math.PI);يقوم برسم دائرة في موقع معين (100، 75) بنصف قطر 50.
-
حدث النقر (
onclick):canvas.onclick = function() { displayDate(); };تعيين دالة لتنفيذها عند النقر على الكانفاس.function displayDate() { document.getElementById("type").innerHTML = Date(); }تقوم بتحديث عنصر الـ “type” بتاريخ اليوم عند النقر.
-
عنصر العرض (
type):يمثل عنصر العرض الذي سيتم تحديثه بعد النقر.
-
تحديث نوع العنصر:
document.getElementById("type").innerHTML = typeof ctx;يقوم بتحديث نوع العنصر “type” بنوع سياق الرسم.
باختصار، يتم رسم دائرة في الكانفاس، وعند النقر عليها، يتم عرض تاريخ اليوم في عنصر type باستخدام JavaScript. يجمع الشيفرة بين HTML وJavaScript لتوفير تفاعل بسيط على الواجهة.
