الخطوات:
إعداد بيئة العمل:
قم بإنشاء صفحة HTML فارغة.
أضف عنصر canvas لإنشاء منطقة للرسم.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronic Whiteboard</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="whiteboard" width="800" height="600"></canvas>
<script src="whiteboard.js"></script>
</body>
</html>
كتابة كود JavaScript:
قم بإنشاء ملف JavaScript جديد (مثلاً whiteboard.js).
استخدم متغير لتخزين context لـ canvas.
javascript
Copy code
const canvas = document.getElementById('whiteboard');
const context = canvas.getContext('2d');
إضافة وظائف الرسم:
استخدم الأحداث للتحكم في الرسم على الواجهة.
أضف دالة للرسم على الـ canvas.
javascript
Copy code
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function endPosition() {
painting = false;
context.beginPath();
}
function draw(e) {
if (!painting) return;
context.lineWidth = 5;
context.lineCap = 'round';
context.strokeStyle = '#000';
context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
context.stroke();
context.beginPath();
context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseleave', endPosition);
إضافة أزرار تحكم:
أضف أزرار لتحديد لون القلم ومسح الواجهة.
html
Copy code
<div>
<button onclick="changeColor('#000')">Black</button>
<button onclick="changeColor('#fff')">White</button>
<button onclick="clearCanvas()">Clear</button>
</div>
javascript
Copy code
function changeColor(color) {
context.strokeStyle = color;
}
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
الاستخدام:
قم بتشغيل الصفحة HTML في متصفح الويب.
يمكنك رسم على الواجهة باستخدام الماوس.
استخدم أزرار التحكم لتغيير لون القلم أو مسح الواجهة.
الختام:
قد قمت الآن بإنشاء وايت بورد الكتروني بسيط باستخدام تقنية Canvas وJavaScript. يمكنك توسيع هذا المشروع بإضافة ميزات إضافية مثل حفظ الرسومات، تغيير حجم الفرشاة، أو مشاركة الصورة المرسومة.
| اسم المستقل | فضل خ. |
| عدد الإعجابات | 1 |
| عدد المشاهدات | 16 |
| تاريخ الإضافة | |
| تاريخ الإنجاز |
