最近在HTML,记录下一点点成果。 设计了一个简易画板,通过HTML的Canvas元素实现一个在线画板,用户可以在上面绘制图形或涂鸦。
下面是运行效果:
下面是代码:
html
<!DOCTYPE html>
<html>
<head>
<title>绘图板</title>
<style>
#drawing-board {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>绘图板</h1>
<canvas id="drawing-board" width="800" height="600"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var drawingBoard = document.getElementById("drawing-board");
var context = drawingBoard.getContext("2d");
var isDrawing = false;
var lastX = 0;
var lastY = 0;
drawingBoard.addEventListener("mousedown", startDrawing);
drawingBoard.addEventListener("mousemove", draw);
drawingBoard.addEventListener("mouseup", stopDrawing);
drawingBoard.addEventListener("mouseout", stopDrawing);
function startDrawing(event) {
isDrawing = true;
[lastX, lastY] = [event.offsetX, event.offsetY];
}
function draw(event) {
if (!isDrawing) return;
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(event.offsetX, event.offsetY);
context.stroke();
[lastX, lastY] = [event.offsetX, event.offsetY];
}
function stopDrawing() {
isDrawing = false;
}
});
</script>
</body>
</html>
这段代码会在浏览器中创建一个标题为"绘图板"的页面。页面顶部有一个 <h1>
元素,用于显示标题。画板使用 <canvas>
元素创建,并在CSS中定义了边框样式。
在JavaScript部分,使用事件监听器来响应鼠标按下、移动和释放的事件。当鼠标按下时,开始绘制路径;当鼠标移动时,继续绘制路径;当鼠标释放或离开画板时,停止绘制路径。使用 offsetX
和 offsetY
属性获取鼠标相对于画板的位置,并使用 context.beginPath()
和 context.lineTo()
方法来绘制路径。
通过以上代码,可以在浏览器中运行,看到一个简易的在线画板。可以点击并拖动鼠标来自由绘制线条。