以下是一个使用JavaScript实现的简单的填涂画板示例。这个示例使用了HTML5 <canvas> 元素和相关的API来实现绘图功能。
HTML部分:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="480" height="320" style="border:1px solid #000000;"></canvas>
<script src="paint_board.js"></script>
</body>
</html>JavaScript部分 (paint\_board.js):
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var isPainting = false;
function startPosition(e) {
isPainting = true;
[prevX, prevY] = [e.offsetX, e.offsetY];
}
function moving(e) {
if (isPainting) {
var currentX = e.offsetX;
var currentY = e.offsetY;
draw(currentX, currentY, prevX, prevY);
[prevX, prevY] = [currentX, currentY];
}
}
function endPosition(e) {
isPainting = false;
}
function draw(x, y, prevX, prevY) {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
}
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mousemove', moving);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mouseleave', endPosition);这段代码实现了基本的绘画功能。用户可以在画布上按下鼠标来开始绘画，然后移动鼠标进行绘制。当用户释放鼠标或者鼠标离开画布区域时，结束绘制过程。这个示例使用了<canvas>元素和context对象的beginPath、moveTo、lineTo、stroke和closePath方法来绘制线条。