js实现画板
实现基础画板功能
创建一个基础的HTML文件，包含canvas元素和必要的JavaScript代码。以下是一个简单的画板实现：
<!DOCTYPE html>
<html>
<head>
<title>简易画板</title>
<style>
canvas {
border: 1px solid black;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
// 设置初始画笔样式
ctx.strokeStyle = '#000000';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
// 鼠标按下事件
canvas.addEventListener('mousedown', startDrawing);
// 鼠标移动事件
canvas.addEventListener('mousemove', draw);
// 鼠标释放事件
canvas.addEventListener('mouseup', stopDrawing);
// 鼠标离开画布事件
canvas.addEventListener('mouseout', stopDrawing);
function startDrawing(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
}
function draw(e) {
if (!isDrawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
function stopDrawing() {
isDrawing = false;
}
</script>
</body>
</html>添加更多功能
扩展基础画板功能，添加颜色选择、画笔大小调整和清除画布功能：
<div>
<label>画笔颜色: <input type="color" id="penColor" value="#000000"></label>
<label>画笔大小: <input type="range" id="penSize" min="1" max="50" value="5"></label>
<button id="clearBtn">清除画布</button>
</div>
<script>
// 获取UI元素
const penColor = document.getElementById('penColor');
const penSize = document.getElementById('penSize');
const clearBtn = document.getElementById('clearBtn');
// 颜色变化事件
penColor.addEventListener('input', () => {
ctx.strokeStyle = penColor.value;
});
// 画笔大小变化事件
penSize.addEventListener('input', () => {
ctx.lineWidth = penSize.value;
});
// 清除画布
clearBtn.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
</script>支持触摸设备
为移动设备添加触摸支持：
// 触摸开始事件
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = {
offsetX: touch.clientX - canvas.offsetLeft,
offsetY: touch.clientY - canvas.offsetTop
};
startDrawing(mouseEvent);
});
// 触摸移动事件
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = {
offsetX: touch.clientX - canvas.offsetLeft,
offsetY: touch.clientY - canvas.offsetTop
};
draw(mouseEvent);
});
// 触摸结束事件
canvas.addEventListener('touchend', stopDrawing);保存画布内容
添加保存功能，将画布内容导出为图片：
<button id="saveBtn">保存图片</button>
<script>
document.getElementById('saveBtn').addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'drawing.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
</script>实现橡皮擦功能
添加橡皮擦功能，通过切换绘图模式实现：
<button id="eraserBtn">橡皮擦</button>
<script>
const eraserBtn = document.getElementById('eraserBtn');
let isEraser = false;
eraserBtn.addEventListener('click', () => {
isEraser = !isEraser;
if (isEraser) {
ctx.globalCompositeOperation = 'destination-out';
eraserBtn.textContent = '画笔';
} else {
ctx.globalCompositeOperation = 'source-over';
eraserBtn.textContent = '橡皮擦';
}
});
</script>这些代码组合在一起可以创建一个功能丰富的画板应用，支持鼠标和触摸输入，具有颜色选择、画笔大小调整、橡皮擦和保存功能。可以根据需要进一步扩展功能，如添加撤销/重做、形状绘制或滤镜效果等。
