ساخت PAINT (نقاشی) تحت وب با جاوا اسکریپت
ایجاد یک برنامه نقاشی تحت وب می‌تواند تجربه‌ای سرگرم‌کننده و آموزشی باشد. با استفاده از جاوا اسکریپت، HTML و CSS، می‌توان یک ابزار نقاشی ساده اما کاربردی طراحی کرد. در ادامه، مراحل اصلی طراحی این برنامه را شرح می‌دهم.
۱. ساختار HTML
برای شروع، ابتدا باید ساختار HTML را ایجاد کنیم. این شامل یک عنصر `<canvas>` است که فضای نقاشی را فراهم می‌کند. همچنین می‌توانیم دکمه‌هایی برای انتخاب رنگ و اندازه قلم اضافه کنیم.
```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" width="800" height="600"></canvas>
<div>
<input type="color" id="colorPicker" value="#000000">
<input type="range" id="brushSize" min="1" max="50" value="5">
<button id="clearBtn">پاک کردن</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
۲. استایل CSS
سپس، برای زیبایی بیشتر، می‌توانیم از CSS استفاده کنیم. این کدها می‌توانند به ما کمک کنند تا ظاهر برنامه را بهبود بخشیم.
```css
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
div {
margin-top: 10px;
}
```
۳. کد جاوا اسکریپت
در نهایت، با استفاده از جاوا اسکریپت می‌توانیم عملکرد نقاشی را پیاده‌سازی کنیم. این کد به ما اجازه می‌دهد تا روی بوم نقاشی کنیم، رنگ و اندازه قلم را تغییر دهیم و بوم را پاک کنیم.
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function endPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineWidth = document.getElementById('brushSize').value;
ctx.strokeStyle = document.getElementById('colorPicker').value;
ctx.lineCap = 'round';
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);
document.getElementById('clearBtn').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
```
نتیجه‌گیری
با این کدها، شما یک برنامه نقاشی ساده و کاربردی دارید. این برنامه به شما اجازه می‌دهد تا با رنگ‌ها و اندازه‌های مختلف، روی بوم نقاشی کنید. همچنین می‌توانید با افزودن ویژگی‌های جدید مانند ذخیره تصویر، انتخاب ابزارهای دیگر و ... این برنامه را گسترش دهید. در نهایت، این پروژه می‌تواند یک نقطه شروع عالی برای یادگیری عمیق‌تر جاوا اسکریپت و تکنیک‌های وب باشد.
