好的，以下是一个简单的绘图板交互功能示例：
首先，我们需要在HTML文件中添加一个canvas标签，用于绘制图形：
```html
<canvas id="canvas" width="500" height="500"></canvas>
```
然后，我们需要使用JavaScript来实现交互功能。具体步骤如下：
1. 获取canvas元素和2D绘图上下文对象。
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
```
2. 添加鼠标事件监听器，用于处理鼠标在canvas上的操作。包括鼠标按下、移动和松开。
```javascript
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
const x = e.offsetX;
const y = e.offsetY;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
[lastX, lastY] = [x, y];
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
```
3. 添加触摸事件监听器，用于处理触摸在canvas上的操作。包括触摸开始、移动和结束。
```javascript
canvas.addEventListener('touchstart', (e) => {
isDrawing = true;
[lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];
});
canvas.addEventListener('touchmove', (e) => {
if (!isDrawing) return;
const x = e.touches[0].clientX - canvas.offsetLeft;
const y = e.touches[0].clientY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
[lastX, lastY] = [x, y];
});
canvas.addEventListener('touchend', () => {
isDrawing = false;
});
```
4. 添加清除画布功能，可以清除整个画布或者指定区域。
```javascript
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function clearRect(x, y, w, h) {
ctx.clearRect(x, y, w, h);
}
```
完整的代码示例如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Drawing Board</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<br>
<button onclick="clearCanvas()">Clear All</button>
<button onclick="clearRect(100, 100, 200, 200)">Clear Rect</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
const x = e.offsetX;
const y = e.offsetY;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
[lastX, lastY] = [x, y];
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('touchstart', (e) => {
isDrawing = true;
[lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];
});
canvas.addEventListener('touchmove', (e) => {
if (!isDrawing) return;
const x = e.touches[0].clientX - canvas.offsetLeft;
const y = e.touches[0].clientY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
[lastX, lastY] = [x, y];
});
canvas.addEventListener('touchend', () => {
isDrawing = false;
});
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function clearRect(x, y, w, h) {
ctx.clearRect(x, y, w, h);
}
</script>
</body>
</html>
```
最低0.47元/天 解锁文章
1313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
