طراحی تابلو نقاشی با استفاده از JavaScript
تابلو نقاشی دیجیتال یک پروژه جذاب و آموزنده است که می‌توان آن را با استفاده از HTML، CSS و JavaScript ایجاد کرد. در اینجا، به بررسی مراحل طراحی یک تابلو نقاشی مشابه نرم‌افزار Paint می‌پردازیم.
مرحله اول: ایجاد ساختار HTML
در ابتدا، باید یک ساختار HTML ساده برای نقاشی ایجاد کنیم.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
```
مرحله دوم: استایل‌دهی با CSS
سپس، باید با CSS ظاهر تابلو را تنظیم کنیم. در اینجا، canvas را با ابعاد مناسب و پس‌زمینه‌ای سفید طراحی می‌کنیم.
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
cursor: crosshair;
}
```
مرحله سوم: نوشتن کد JavaScript
حالا، به قلب پروژه می‌رسیم. در اینجا، با استفاده از JavaScript، قابلیت‌های نقاشی را فعال می‌کنیم.
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function endPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
```
نتیجه‌گیری
با اجرای این کد، شما یک تابلو نقاشی ساده خواهید داشت که می‌توانید روی آن نقاشی کنید. برای توسعه بیشتر، می‌توانید ابزارهای بیشتری مانند تغییر رنگ، اندازه قلم و ذخیره‌سازی نقاشی را به آن اضافه کنید. این پروژه، نه تنها به شما در یادگیری JavaScript کمک می‌کند، بلکه مهارت‌های طراحی وب شما را تقویت خواهد کرد.
