کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **Sketch Maker** در JavaScript
این پروژه یک برنامه ساده برای طراحی و ایجاد نقاشی‌ها با استفاده از HTML، CSS و JavaScript است. کاربر می‌تواند با کلیک و کشیدن ماوس بر روی بوم، نقاشی کند.
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه Sketch Maker ایجاد می‌کنیم.
```html
Sketch Maker
```
### 2. **CSS**
برای طراحی ظاهری برنامه Sketch Maker از 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 #ddd;
width: 100%;
height: 400px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
input[type="color"] {
margin-left: 10px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const canvas = document.getElementById('sketchCanvas');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clearBtn');
const colorPicker = document.getElementById('colorPicker');
// تنظیم ابعاد بوم
canvas.width = 600;
canvas.height = 400;
// متغیرها برای ترسیم
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// تابع شروع ترسیم
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}
// تابع ترسیم
function draw(e) {
if (!isDrawing) return;
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
// تابع پایان ترسیم
function stopDrawing() {
isDrawing = false;
ctx.closePath();
}
// تابع پاک کردن بوم
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// رویدادهای ماوس
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
// رویداد کلیک دکمه پاک کردن
clearBtn.addEventListener('click', clearCanvas);
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان برنامه، بوم (canvas) برای طراحی، دکمه‌ای برای پاک کردن بوم و رنگ‌ساز (color picker) برای انتخاب رنگ.
2. **CSS**:
- طراحی ساده و کاربرپسند برای بوم، دکمه‌ها و رنگ‌ساز.
3. **JavaScript**:
- **انتخاب عناصر HTML**: برای بوم، دکمه پاک کردن و رنگ‌ساز.
- **تنظیم ابعاد بوم**: تعیین عرض و ارتفاع بوم.
- **متغیرها**: برای پیگیری وضعیت ترسیم و آخرین مختصات ماوس.
- **تابع شروع ترسیم**: فعال‌سازی ترسیم و ذخیره مختصات اولیه ماوس.
- **تابع ترسیم**: رسم خط بین دو مختصات ماوس.
- **تابع پایان ترسیم**: غیرفعال کردن حالت ترسیم.
- **تابع پاک کردن بوم**: پاک کردن محتوای بوم.
- **رویدادهای ماوس**: پیوند دادن رویدادها به توابع مربوطه.
### نتیجه‌گیری
این پروژه **Sketch Maker** یک مثال عالی برای یادگیری نحوه کار با بوم HTML و مدیریت رویدادهای ماوس در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تغییر ضخامت خط یا ذخیره نقاشی‌ها به عنوان تصویر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **Sketch Maker** در JavaScript می‌باشد
