用canvas实现一个画板,可以删除,返回上一步,进入下一步,给画笔设置颜色和大小
时间: 2023-06-07 15:07:40 浏览: 196
通过canvas实现简易画板
好的,我理解了您的要求。下面是使用Canvas实现的画板的示例代码,您可以使用这个代码来实现您需要的画板功能:
```
<!DOCTYPE html>
<html>
<head>
<title>Canvas Paint Board</title>
</head>
<body>
<canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
<label>Color:</label>
<input type="color" id="colorPicker">
<label>Brush Size:</label>
<input type="range" id="brushSize" value="10" min="1" max="50">
<button id="undoBtn">Undo</button>
<button id="redoBtn">Redo</button>
<button id="clearBtn">Clear</button>
<script>
// 获取画布和画笔
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 画笔颜色和粗细
var brushColor = document.getElementById("colorPicker").value;
var brushSize = document.getElementById("brushSize").value;
// 保存历史记录的栈
var undoStack = [];
var redoStack = [];
// 绘制初始画面
drawCanvas();
// 监听画布点击事件
canvas.addEventListener("mousedown", startDrawing);
// 监听画笔颜色和粗细的变化
document.getElementById("colorPicker").addEventListener("input", changeColor);
document.getElementById("brushSize").addEventListener("input", changeBrushSize);
// 监听撤销、重做和清空按钮的点击事件
document.getElementById("undoBtn").addEventListener("click", undoDrawing);
document.getElementById("redoBtn").addEventListener("click", redoDrawing);
document.getElementById("clearBtn").addEventListener("click", clearCanvas);
// 鼠标按下,准备开始绘制
function startDrawing(event) {
// 添加绘制历史记录
undoStack.push(canvas.toDataURL());
// 获取鼠标在画布上的位置
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
canvas.addEventListener("mousemove", drawLine);
canvas.addEventListener("mouseup", stopDrawing);
// 绘制初始点
ctx.beginPath();
ctx.moveTo(x, y);
}
// 绘制线条
function drawLine(event) {
// 获取鼠标在画布上的位置
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
// 设置画笔的颜色和粗细
ctx.strokeStyle = brushColor;
ctx.lineWidth = brushSize;
// 绘制线条
ctx.lineTo(x, y);
ctx.stroke();
}
// 鼠标抬起,结束绘制
function stopDrawing() {
canvas.removeEventListener("mousemove", drawLine);
canvas.removeEventListener("mouseup", stopDrawing);
}
// 改变画笔颜色
function changeColor(event) {
brushColor = event.target.value;
}
// 改变画笔粗细
function changeBrushSize(event) {
brushSize = event.target.value;
}
// 撤销绘制
function undoDrawing() {
if (undoStack.length > 0) {
// 添加重做历史记录
redoStack.push(canvas.toDataURL());
var lastDraw = undoStack.pop();
var img = new Image();
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
};
img.src = lastDraw;
}
}
// 重做绘制
function redoDrawing() {
if (redoStack.length > 0) {
// 添加撤销历史记录
undoStack.push(canvas.toDataURL());
var lastDraw = redoStack.pop();
var img = new Image();
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
};
img.src = lastDraw;
}
}
// 清空画布
function clearCanvas() {
// 添加撤销历史记录
undoStack.push(canvas.toDataURL());
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 绘制初始画面
function drawCanvas() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
```
这段代码使用了Canvas API来绘制图形,同时实现了一些常见的画板功能,包括:
- 绘制线条
- 改变画笔颜色和粗细
- 撤销、重做和清空画布
您可以在上面的示例代码基础上进行修改,添加自己需要的功能。同时,注意保护好用户的隐私和安全,不要泄露用户的任何信息。
阅读全文