HTML5代码如何制作在线画板 HTML5代码Canvas的绘图板开发-html教程-PHP中文网

HTML5代码如何制作在线画板 HTML5代码Canvas的绘图板开发

雪夜

发布： 2025-10-20 12:58:01

原创

1004人浏览过

答案：使用HTML5 Canvas和JavaScript可创建在线画板，支持画笔、橡皮擦、颜色线宽调节及清空功能。1. 通过canvas绘制图形，监听鼠标事件实现绘图；2. 利用color和range输入框控制颜色与线条粗细；3. 橡皮擦通过切换为白色画笔覆盖实现；4. clearRect方法清空画布；5. 可扩展触摸支持、撤销、保存等功能。

html5代码如何制作在线画板 html5代码canvas的绘图板开发

使用HTML5的Canvas元素可以轻松创建一个在线绘图画板。通过JavaScript操作Canvas API，你可以实现基本的绘图功能，如画笔、擦除、颜色选择和清空画布等。下面是一个完整的示例代码，展示如何开发一个简单的在线画板。

1. 基本HTML结构

首先创建一个包含Canvas画布和控制按钮的HTML页面：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>HTML5在线画板</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    #canvas {
      border: 1px solid #ccc;
      cursor: crosshair;
    }
    .controls button {
      margin: 5px;
      padding: 8px 12px;
      font-size: 14px;
    }
    .controls input {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <h2>在线绘图画板</h2>
  <div class="controls">
    <input type="color" id="colorPicker" value="#000000" />
    <input type="range" id="lineWidth" min="1" max="20" value="5" />
    <button id="clearBtn">清空画布</button>
    <button id="eraserBtn">橡皮擦</button>
    <button id="penBtn">画笔</button>
  </div>
  <br />
  <canvas id="canvas" width="800" height="500"></canvas>
  <script>
    // JavaScript代码将在下方添加
  </script>
</body>
</html>

登录后复制

2. 使用JavaScript实现绘图逻辑

在<script>标签中添加以下JavaScript代码，实现鼠标绘制功能：

// 获取元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const lineWidthInput = document.getElementById('lineWidth');
const clearBtn = document.getElementById('clearBtn');
const eraserBtn = document.getElementById('eraserBtn');
const penBtn = document.getElementById('penBtn');

// 绘图状态
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let isEraser = false;

// 设置初始线条样式
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';

// 鼠标按下开始绘制
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

// 鼠标移动时绘制线条
canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

// 鼠标松开停止绘制
canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

// 鼠标离开画布也停止
canvas.addEventListener('mouseout', () => {
  isDrawing = false;
});

// 更新线条宽度
lineWidthInput.addEventListener('change', () => {
  ctx.lineWidth = lineWidthInput.value;
});

// 更新颜色（如果不是橡皮擦模式）
colorPicker.addEventListener('change', () => {
  if (!isEraser) {
    ctx.strokeStyle = colorPicker.value;
  }
});

// 清空画布
clearBtn.addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

// 切换橡皮擦模式
eraserBtn.addEventListener('click', () => {
  isEraser = true;
  ctx.strokeStyle = '#FFFFFF'; // 白色模拟擦除
  eraserBtn.classList.add('active');
  penBtn.classList.remove('active');
});

// 切换画笔模式
penBtn.addEventListener('click', () => {
  isEraser = false;
  ctx.strokeStyle = colorPicker.value;
  penBtn.classList.add('active');
  eraserBtn.classList.remove('active');
});

登录后复制