کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **برنامه طراحی** با استفاده از JavaScript
این پروژه یک برنامه ساده طراحی است که به کاربران اجازه می‌دهد با استفاده از موس بر روی یک بوم (Canvas) نقاشی کنند. این برنامه شامل ویژگی‌های پایه‌ای مانند انتخاب رنگ، اندازه قلم و پاک کردن بوم است.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه طراحی ایجاد می‌کنیم.
```html
برنامه طراحی
```
### 2. **CSS**
برای طراحی ظاهری برنامه از CSS استفاده می‌کنیم.
```css
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
}
.toolbar {
margin: 10px;
}
canvas {
border: 1px solid #000;
cursor: crosshair;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
const clearCanvasBtn = document.getElementById('clearCanvas');
// تنظیم ابعاد بوم
canvas.width = window.innerWidth - 20; // کاهش عرض بوم به اندازه 20 پیکسل
canvas.height = window.innerHeight - 100; // کاهش ارتفاع بوم به اندازه 100 پیکسل
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.clearRect(0, 0, canvas.width, canvas.height);
}
// رویدادهای موس
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
clearCanvasBtn.addEventListener('click', clearCanvas);
```
### توضیحات کد:
1. **HTML**:
- شامل بوم (Canvas) برای نقاشی و عناصر کنترلی مانند انتخابگر رنگ، اندازه قلم و دکمه پاک کردن است.
2. **CSS**:
- طراحی بوم و کنترل‌ها با حاشیه و پس‌زمینه مناسب.
3. **JavaScript**:
- **تنظیمات اولیه**: شامل ابعاد بوم و متغیرهای کنترل نقاشی.
- **عملکرد نقاشی**: شامل توابع برای شروع، پایان و کشیدن روی بوم.
- **پاک کردن بوم**: شامل تابعی برای پاک کردن تمامی محتوای بوم.
- **رویدادهای موس**: شامل رویدادهایی برای شروع، پایان و کشیدن روی بوم و همچنین دکمه پاک کردن.
### نتیجه‌گیری
این پروژه **برنامه طراحی** یک مثال عالی برای یادگیری نحوه استفاده از Canvas در JavaScript و ایجاد رابط کاربری تعاملی است. شما میتوانید این پروژه را با اضافه کردن ویژگی‌های جدید، مانند ذخیره‌سازی طراحی‌ها یا افزودن اشکال هندسی، گسترش دهید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه طراحی** با استفاده از JavaScript می‌باشد
