javascript实现的白板效果(可以直接在网页上写字)

以下是“JavaScript实现的白板效果”的完整攻略。

什么是JavaScript实现的白板效果

JavaScript实现的白板效果指的是一种可以在网页上直接进行绘图、写字的技术。用户可以使用鼠标或者触摸屏输入文字、画图，实现类似于白板的功能，便于在网页上进行各种标记和展示。

实现“JavaScript实现的白板效果”的步骤

实现“JavaScript实现的白板效果”的基本步骤如下：

1. 在HTML文件中插入一个画布元素，设置画布的宽度和高度。
2. 在JavaScript文件中获取该画布元素，并绑定鼠标事件或者触摸事件，用于用户输入文字和绘图。
3. 在JavaScript文件中编写绘制函数，根据用户输入的信息在画布上进行相应的绘制。

下面我们来看下具体实现步骤：

步骤一：在HTML文件中插入画布元素

<canvas id="myCanvas" width="500" height="500"></canvas>

此处我们定义了一个id为“myCanvas”的画布元素，宽度和高度都为500px。

步骤二：在JavaScript文件中获取画布元素并绑定事件

let canvas = document.getElementById("myCanvas");
let 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) {
    drawLine(lastX, lastY, e.offsetX, e.offsetY);
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
  isDrawing = false;
});

这段代码中，我们首先获取了id为“myCanvas”的画布元素，并获取了两个绘制画布的JavaScript API，即获取画布的上下文（ctx）。

然后我们用addEventListener方法为画布元素添加了鼠标事件，当鼠标点击画布元素时，表示用户开始画图，此时开启绘制（isDrawing=true），记录下鼠标点击的坐标（lastX, lastY）。

接着添加了鼠标移动事件，当用户拖动鼠标时，根据当前鼠标位置和上一个鼠标位置将画图的路径进行拼接（ drawLine(lastX, lastY, e.offsetX, e.offsetY)），并用lastX, lastY记录当前鼠标位置。

最后，当鼠标松开时（mouseup事件）或者鼠标离开画布元素时（mouseout事件），结束绘图过程（isDrawing=false）。

步骤三：编写绘制函数

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

这里我们编写了一个简单的绘制函数，用于在画布上绘制直线。其中，beginPath()表示开始一条路径，moveTo(x1, y1)表示将画笔移动到一个新的位置上，lineTo(x2, y2)表示在这个位置上绘制一条直线，stroke()表示将当前路径进行描边。

至此，我们就完成了“JavaScript实现的白板效果”的基本实现。

示例1

下面是一个简单的例子，实现了在画布上画线和写字（注意，为了方便起见，这里只实现了移动端的触摸事件）。

HTML文件：

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript文件：

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('touchstart', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];
});

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  if (isDrawing) {
    let currentX = e.touches[0].clientX - canvas.offsetLeft;
    let currentY = e.touches[0].clientY - canvas.offsetTop;
    drawLine(lastX, lastY, currentX, currentY);
    [lastX, lastY] = [currentX, currentY];
  }
});

canvas.addEventListener('touchend', () => {
  isDrawing = false;
});

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'black';
  ctx.stroke();
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

示例2

下面我们来看看如何实现一些更加高级的功能，比如可以设置画笔的颜色和粗细，并可以撤销和清空所画的内容。

HTML文件：

<canvas id="myCanvas" width="500" height="500"></canvas>
<button id="undoBtn">撤销</button>
<button id="clearBtn">清空</button>

JavaScript文件：

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let isDrawing = false;
let lastX = 0;
let lastY = 0;

let currentColor = 'black';
let lineWidth = 5;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    let currentX = e.offsetX;
    let currentY = e.offsetY;
    drawLine(lastX, lastY, currentX, currentY);
    [lastX, lastY] = [currentX, currentY];
  }
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
  saveState();
});

canvas.addEventListener('mouseout', () => {
  isDrawing = false;
  saveState();
});

document.getElementById('undoBtn').addEventListener('click', undoLastAction);

document.getElementById('clearBtn').addEventListener('click', clearCanvas);

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = currentColor;
  ctx.stroke();
}

function saveState() {
  window.localStorage.setItem('canvasState', canvas.toDataURL());
}

function undoLastAction() {
  let canvasData = window.localStorage.getItem('canvasState');
  let image = new Image();
  image.onload = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(image, 0, 0);
  }
  image.src = canvasData;
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  window.localStorage.setItem('canvasState', canvas.toDataURL());
}

document.getElementById('colorPicker').addEventListener('change', (e) => {
  currentColor = e.target.value;
});

document.getElementById('lineWidth').addEventListener('change', (e) => {
  lineWidth = parseInt(e.target.value);
});

在这个例子中，我们加入了按钮用于撤销和清空所画的内容，并且可以设置画笔的颜色和粗细。我们用localStorage来记录画布的状态（包括当前绘制状态和绘制历史记录），在撤销和清空操作时直接获取到该状态进行相关操作。同时，我们也将绘制函数的参数进行了调整，支持了更加灵活的笔画宽度和颜色的设置。