canvans 实现给图片画矩形 箭头 多边形 全屏 撤销 反撤销
时间: 2024-04-23 12:26:46 浏览: 11
以下是一个基本的 Canvas 图片编辑工具的示例代码,包含绘制矩形、箭头、多边形、全屏、撤销和反撤销等功能:
```html
<!-- HTML -->
<canvas id="canvas"></canvas>
<button id="fullscreen-btn">全屏</button>
<button id="undo-btn">撤销</button>
<button id="redo-btn">反撤销</button>
<button id="rect-btn">矩形</button>
<button id="arrow-btn">箭头</button>
<button id="polygon-btn">多边形</button>
<!-- CSS -->
#canvas {
border: 1px solid #ccc;
}
#fullscreen-btn {
margin-right: 10px;
}
#undo-btn,
#redo-btn,
#rect-btn,
#arrow-btn,
#polygon-btn {
margin-bottom: 10px;
}
<!-- JavaScript -->
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let startX, startY;
let points = [];
let undoStack = [];
let redoStack = [];
// 绘制矩形
function drawRect(x, y, width, height) {
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.rect(x, y, width, height);
ctx.stroke();
}
// 绘制箭头
function drawArrow(startX, startY, endX, endY) {
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.lineTo(endX - 15, endY + 10);
ctx.moveTo(endX, endY);
ctx.lineTo(endX - 15, endY - 10);
ctx.stroke();
}
// 绘制多边形
function drawPolygon(points) {
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.closePath();
ctx.stroke();
}
// 保存当前画布状态
function saveState() {
undoStack.push(canvas.toDataURL());
}
// 恢复上一个画布状态
function undo() {
if (undoStack.length > 0) {
redoStack.push(canvas.toDataURL());
let state = undoStack.pop();
let img = new Image();
img.src = state;
img.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
}
}
}
// 恢复下一个画布状态
function redo() {
if (redoStack.length > 0) {
undoStack.push(canvas.toDataURL());
let state = redoStack.pop();
let img = new Image();
img.src = state;
img.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
}
}
}
canvas.addEventListener('mousedown', function(e) {
isDrawing = true;
startX = e.clientX - canvas.offsetLeft;
startY = e.clientY - canvas.offsetTop;
saveState();
});
canvas.addEventListener('mousemove', function(e) {
if (isDrawing) {
let x = e.clientX - canvas.offsetLeft;
let y = e.clientY - canvas.offsetTop;
// 绘制矩形
if (document.getElementById('rect-btn').checked) {
let width = x - startX;
let height = y - startY;
drawRect(startX, startY, width, height);
}
// 绘制箭头
if (document.getElementById('arrow-btn').checked) {
drawArrow(startX, startY, x, y);
}
// 绘制多边形
if (document.getElementById('polygon-btn').checked) {
points.push({
x: x,
y: y
});
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
drawPolygon(points);
}
}
});
canvas.addEventListener('mouseup', function(e) {
isDrawing = false;
if (document.getElementById('polygon-btn').checked) {
points.push({
x: e.clientX - canvas.offsetLeft,
y: e.clientY - canvas.offsetTop
});
drawPolygon(points);
points = [];
}
});
document.getElementById('fullscreen-btn').addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
canvas.requestFullscreen();
}
});
document.getElementById('undo-btn').addEventListener('click', function() {
undo();
});
document.getElementById('redo-btn').addEventListener('click', function() {
redo();
});
```
其中,`drawRect()`、`drawArrow()` 和 `drawPolygon()` 分别用于绘制矩形、箭头和多边形,`saveState()`、`undo()` 和 `redo()` 分别用于保存画布状态和进行撤销和反撤销操作。可以通过给相应的按钮添加 `checked` 属性来选择要绘制的图形。