介绍
本文将通过使用 HTML5 中的 <canvas> 元素和 JavaScript 来实现一个简单的画板。该画板具有以下功能：
- 选择画笔颜色和粗细
- 使用橡皮擦擦除画板内容
- 清空画板
实现步骤
步骤 1：HTML 结构
创建一个包含画板功能的 HTML 结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 画板</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Canvas 画板</h1>
<div id="canvas-container">
<canvas id="canvas"></canvas>
</div>
<div id="controls">
<input type="color" id="colorPicker" value="#000000">
<input type="range" id="thicknessSlider" min="1" max="10" step="1" value="1">
<button id="eraser">橡皮擦</button>
<button id="clear">清空</button>
</div>
<script src="app.js"></script>
</body>
</html>
步骤 2：CSS 样式
通过 CSS 样式来美化页面布局和元素样式。
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
#canvas-container {
background-color: #fff;
width: 600px;
height: 400px;
margin: 0 auto;
border: 2px solid #ccc;
border-radius: 6px;
overflow: hidden;
}
#controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
#controls input[type="color"],
#controls input[type="range"],
#controls button {
margin: 0 10px;
}
步骤 3：JavaScript 逻辑
使用 JavaScript 来实现画板的功能。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const thicknessSlider = document.getElementById('thicknessSlider');
const eraserButton = document.getElementById('eraser');
const clearButton = document.getElementById('clear');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
colorPicker.addEventListener('input', updateColor);
thicknessSlider.addEventListener('input', updateThickness);
eraserButton.addEventListener('click', activateEraser);
clearButton.addEventListener('click', clearCanvas);
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function draw(e) {
if (!isDrawing) return;
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = colorPicker.value;
context.lineWidth = thicknessSlider.value;
context.lineCap = 'round';
context.lineJoin = 'round';
context.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function stopDrawing() {
isDrawing = false;
}
function updateColor() {
context.strokeStyle = colorPicker.value;
}
function updateThickness() {
context.lineWidth = thicknessSlider.value;
}
function activateEraser() {
if (eraserButton.classList.contains('active')) {
eraserButton.classList.remove('active');
canvas.style.cursor = 'crosshair';
} else {
eraserButton.classList.add('active');
canvas.style.cursor = 'default';
}
}
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
总结
通过 HTML5 中的 <canvas> 元素和 JavaScript，我们成功实现了一个具有画笔颜色、画笔粗细、橡皮擦和清空功能的画板。你可以随意使用画笔绘制图形，调整颜色和粗细，用橡皮擦擦除绘制内容或者清空整个画板。希望这个简单的创作能够帮助你更好地理解 canvas 的使用。
