企业官网建设在当今数字化时代扮演着至关重要的角色,不仅是企业形象的展示窗口,也是品牌宣传、客户服务与业务推广的重要渠道。随着技术的不断进步和用户需求的变化,企业官网建设也在持续发展和创新。以下是关于企
要在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按钮清空画布。在画布上绘制时,用户可以使用鼠标左键绘制线条,使用右键擦除。
标签:工具栏