用canvas实现一个电子作业批改的功能,可打对勾,可拖动对勾位置,可添加文本
时间: 2024-02-24 11:59:57 浏览: 20
好的,我可以帮你解决这个问题。实现电子作业批改功能需要用到 HTML5 中的 canvas 元素,其中包括绘制图形、拖拽和添加文本等操作。下面是一个简单的示例,演示如何实现这些功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>电子作业批改</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 打对勾
function drawCheckmark(x, y, size) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + size / 2, y + size / 2);
ctx.lineTo(x + size, y - size / 2);
ctx.stroke();
}
// 绘制初始对勾
drawCheckmark(50, 50, 20);
// 拖拽对勾
var isDragging = false;
var offsetX, offsetY;
canvas.addEventListener("mousedown", function (e) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
if (
x > 50 - 10 &&
x < 50 + 10 &&
y > 50 - 10 &&
y < 50 + 10
) {
isDragging = true;
offsetX = x - 50;
offsetY = y - 50;
}
});
canvas.addEventListener("mousemove", function (e) {
if (isDragging) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left - offsetX;
var y = e.clientY - rect.top - offsetY;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCheckmark(x, y, 20);
}
});
canvas.addEventListener("mouseup", function (e) {
isDragging = false;
});
// 添加文本
var textInput = document.getElementById("text");
var addButton = document.getElementById("add");
addButton.addEventListener("click", function () {
var text = textInput.value;
ctx.font = "16px Arial";
ctx.fillText(text, 50, 100);
});
};
</script>
</head>
<body>
<h1>电子作业批改</h1>
<canvas id="canvas" width="400" height="400"></canvas>
<br />
<input type="text" id="text" />
<button id="add">添加文本</button>
</body>
</html>
```
在这个示例中,我们首先定义了一个 `drawCheckmark` 函数,用于绘制对勾。然后,在 `onload` 事件中,我们调用了这个函数来绘制初始的对勾。接着,我们添加了三个事件监听器,用于实现对勾的拖拽和文本的添加。其中,`mousedown` 事件监听器用于检测鼠标是否点击在对勾上,如果是,则设置 `isDragging` 为 true,并记录下鼠标点击位置和对勾位置的偏移量。`mousemove` 事件监听器用于在拖拽过程中实时更新对勾位置,并清除画布上的内容。`mouseup` 事件监听器用于在拖拽结束时将 `isDragging` 设置为 false。
最后,我们添加了一个文本输入框和一个按钮,用于添加文本。点击按钮时,我们获取文本框中的值,并使用 `fillText` 函数在画布上绘制文本。
希望这个示例能够帮助你实现电子作业批改功能。如果你还有其他问题,请随时提出。