一、项目介绍
项目名称为“水果画板”,由水果工作站于2024年份开发。以下是水果画板的初始开发阶段,项目是一个基于 HTML、CSS 和 JavaScript 的在线画板工具。该工具设计用于提供用户一个简单易用的绘图写字环境,特别适合教育和娱乐场景。主要功能包括绘制、擦除、新建页面、清空画布、选择背景颜色、画笔颜色和大小调整以及画布透明度控制。用户可以通过点击按钮或者使用触摸屏幕来进行绘制操作,支持实时绘制和自动擦除功能,提供了直观的页面导航和页码显示功能,使用户可以轻松切换和管理多个绘画页面。
“水果画板”采用现代化的用户界面设计,背景色为清新的绿色调,使用户在使用过程中感受到舒适和创意的氛围。通过整合 Bootstrap 和 FontAwesome 等前端库,确保了界面的响应性和图标的丰富性。每个绘画页面都可以保存为图片数据,并支持随时切换背景颜色和画笔样式,为用户提供了灵活的创作体验。
“水果画板”不仅适用于个人创作和学习,还可以作为教育工具,帮助教师和学生展示和讨论创意想法。它的简洁设计和强大功能使得任何用户都能够轻松上手,快速创作出精美的绘画作品,为用户提供了一个实用而有趣的在线绘图平台。
注:以下是项目开发阶段的一个初期成果,仅仅为开发画板方向的开发者提供一个思路和借鉴。
二、项目完整代码
<!-- 原创作者:水果工作站 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水果画板</title>
<link rel="icon" href="img/icon.png" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
background-color: #03906b;
font-family: Arial, sans-serif;
}
.whiteboard-container {
max-width: 1288px;
margin: 20px auto;
position: relative;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
canvas {
display: block;
width: 100%;
max-width: 100%;
border: 1px solid #000;
margin-bottom: 20px;
touch-action: none;
}
.button-container {
margin-bottom: 20px;
}
.page-navigation {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.page-number {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 16px;
color: #fff;
}
label.btn.btn-outline-secondary {
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="whiteboard-container">
<canvas id="whiteboard" width="800" height="600"></canvas>
<div class="button-container">
<