html5如何画图工具栏

要在HTML5中创建一个简单的画图工具栏，您可以使用HTML、CSS和JavaScript来实现。以下是一个示例，演示如何创建一个包含画笔、橡皮擦和清空功能的简单画图工具栏。

1. HTML部分：

```html

```

2. CSS部分：

```css

#toolbar {

margin-bottom: 10px;

}

button {

margin-right: 10px;

}

```

3. JavaScript部分：

```javascript

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

let isDrawing = false;

let isErasing = false;

canvas.width = 800;

canvas.height = 400;

canvas.addEventListener('mousedown', startDrawing);

canvas.addEventListener('mousemove', draw);

canvas.addEventListener('mouseup', endDrawing);

canvas.addEventListener('mouseout', endDrawing);

document.getElementById('pen').addEventListener('click', () => {

isErasing = false;

isDrawing = true;

});

document.getElementById('eraser').addEventListener('click', () => {

isDrawing = false;

isErasing = true;

});

document.getElementById('clear').addEventListener('click', () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

});

function startDrawing(event) {

isDrawing = true;

ctx.beginPath();

ctx.moveTo(event.offsetX, event.offsetY);

}

function draw(event) {

if (isDrawing) {

if (isErasing) {

ctx.clearRect(event.offsetX - 5, event.offsetY - 5, 10, 10);

} else {

ctx.lineTo(event.offsetX, event.offsetY);

ctx.stroke();

}

}

}

function endDrawing() {

isDrawing = false;

isErasing = false;

}

```

以上代码示例创建了一个包含三个按钮的画图工具栏：Pen（画笔）、Eraser（橡皮擦）和Clear（清空）。用户可以点击Pen按钮开始绘制，点击Eraser按钮开始擦除，点击Clear按钮清空画布。在画布上绘制时，用户可以使用鼠标左键绘制线条，使用右键擦除。

标签：工具栏