کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **ابزار نقاشی** (Painting Tool) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران امکان می‌دهد با استفاده از ماوس روی صفحه نقاشی کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای ابزار نقاشی ایجاد می‌کنیم.
```html
ابزار نقاشی
```
### 2. **CSS**
برای طراحی ظاهری ابزار نقاشی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
canvas {
border: 1px solid #ccc;
cursor: crosshair;
}
.controls {
margin-top: 10px;
}
input[type="color"] {
margin: 5px;
}
input[type="range"] {
margin: 5px;
}
```
### 3. **JavaScript**
سپس منطق ابزار نقاشی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
const clearBtn = document.getElementById('clearBtn');
canvas.width = 800; // عرض بوم
canvas.height = 600; // ارتفاع بوم
ctx.fillStyle = "#fff"; // رنگ پس‌زمینه
ctx.fillRect(0, 0, canvas.width, canvas.height); // پر کردن پس‌زمینه با رنگ سفید
let painting = false; // وضعیت نقاشی
// تابع شروع نقاشی
function startPosition(e) {
painting = true;
draw(e);
}
// تابع پایان نقاشی
function endPosition() {
painting = false;
ctx.beginPath(); // شروع مسیر جدید
}
// تابع نقاشی
function draw(e) {
if (!painting) return; // اگر در حال نقاشی نیست، تابع را خاتمه دهید
ctx.lineWidth = brushSize.value; // اندازه قلم
ctx.lineCap = 'round'; // نوع انتهای خط
ctx.strokeStyle = colorPicker.value; // رنگ قلم
// موقعیت ماوس
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke(); // کشیدن خط
ctx.beginPath(); // شروع مسیر جدید
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); // حرکت به موقعیت جدید
}
// تابع پاک کردن بوم
function clearCanvas() {
ctx.fillStyle = "#fff"; // رنگ پس‌زمینه
ctx.fillRect(0, 0, canvas.width, canvas.height); // پر کردن بوم با رنگ سفید
}
// رویدادهای ماوس
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
clearBtn.addEventListener('click', clearCanvas);
```
### توضیحات کد:
1. **HTML**: شامل عنوان، بوم (canvas) برای نقاشی، کنترل‌هایی برای انتخاب رنگ، اندازه قلم و دکمه پاک کردن است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **متغیرها**: متغیرهایی برای نگهداری عناصر HTML و تنظیمات بوم.
- **تابع شروع نقاشی**: شروع نقاشی را در هنگام کلیک ماوس آغاز می‌کند.
- **تابع پایان نقاشی**: پایان نقاشی را در هنگام رها کردن ماوس خاتمه می‌دهد.
- **تابع نقاشی**: کشیدن خطوط با توجه به موقعیت ماوس و تنظیمات کاربر.
- **تابع پاک کردن بوم**: بوم را با رنگ سفید پر می‌کند.
- **مدیریت رویداد**: به رویدادهای ماوس و دکمه پاک کردن متصل است.
### نتیجه‌گیری
این پروژه **ابزار نقاشی** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری بوم و رویدادهای ماوس است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی تصویر، اضافه کردن اشکال هندسی، یا قابلیت انتخاب رنگ‌های سفارشی را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **ابزار نقاشی** (Painting Tool) با استفاده از HTML، CSS و JavaScript می‌باشد
