HTML创建一个画布,画布左侧居中位置有画笔粗细选择框,颜色选中器,橡皮擦。
时间: 2024-04-12 22:32:47 浏览: 19
你可以通过HTML的<canvas>元素创建一个画布,并在左侧居中位置添加画笔粗细选择框、颜色选取器和橡皮擦。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#canvas-container {
display: flex;
align-items: center;
justify-content: center;
}
#tools {
position: absolute;
left: 30px;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div id="canvas-container">
<canvas id="canvas" width="800" height="600"></canvas>
<div id="tools">
<label for="brush-size">Brush Size:</label>
<input type="range" id="brush-size" min="1" max="20" value="5">
<input type="color" id="color-picker" value="#000000">
<button id="eraser">Eraser</button>
</div>
</div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var brushSizeInput = document.getElementById('brush-size');
var colorPicker = document.getElementById('color-picker');
var eraserBtn = document.getElementById('eraser');
var isDrawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
function startDrawing(e) {
isDrawing = true;
draw(e);
}
function draw(e) {
if (!isDrawing) return;
var x = e.offsetX;
var y = e.offsetY;
var brushSize = brushSizeInput.value;
var color = colorPicker.value;
var eraserMode = eraserBtn.classList.contains('active');
ctx.beginPath();
ctx.lineWidth = brushSize;
ctx.lineCap = 'round';
ctx.strokeStyle = eraserMode ? 'white' : color;
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.stroke();
}
function stopDrawing() {
isDrawing = false;
}
eraserBtn.addEventListener('click', function() {
this.classList.toggle('active');
});
</script>
</body>
</html>
```
这段代码创建了一个800x600像素的画布,并在左侧居中位置添加了画笔粗细选择框、颜色选取器和橡皮擦按钮。你可以通过移动鼠标在画布上绘制,并通过选择不同的画笔粗细和颜色来进行绘制。点击橡皮擦按钮可以切换为橡皮擦模式。