标
题：如何使用 CSS 实现画板功能 在前端开发中，我们常常需要使用 CSS 来实现各种效果，其中画板功能是一个比较有趣的应用。下面我们将介绍如何使用 CSS3 实现一个简单的画板功能。 首先，我们需要在 HTML 中创建一个画板容器： ``` ``` 接下来，我们通过 CSS 设置画板的样式： ``` #canvas { width: 500px; height: 500px; background-color: #fff; border: 1px solid #000; } ``` 这里我们将画板的宽度和高度设置为 500px，并设置了一个白色的背景和黑色的边框。接下来，我们需要为画板添加一个坐标系。可以简单地使用 CSS 进行绘制： ``` #canvas::before { content: ''; position: absolute; top: 0; left: 0; border-right: 1px solid #000; border-bottom: 1px solid #000; width: 500px; height: 500px; z-index: 9999; } #canvas::after { content: ''; position: absolute; top: 0; left: 0; border-right: 1px solid #000; border-bottom: 1px solid #000; width: 500px; height: 500px; transform: rotate(45deg); z-index: 9999; } ``` 这里我们通过伪元素 ::before 和 ::after 来分别绘制横轴和纵轴，并使用 transform 属性将纵轴旋转 45 度。同时，我们还需要为画板添加鼠标事件，使得用户可以在画板上绘制图形： ``` let canvas = document.getElementById('canvas'); let isDrawing = false; let lastPos = { x: 0, y: 0 }; canvas.addEventListener('mousedown', e => { isDrawing = true; lastPos = { x: e.clientX, y: e.clientY }; }); canvas.addEventListener('mousemove', e => { if (isDrawing) { let currentPos = { x: e.clientX, y: e.clientY }; let line = document.createElement('div'); line.style.position = 'absolute'; line.style.border = '1px solid #000'; line.style.width = Math.abs(currentPos.x - lastPos.x) + 'px'; line.style.height = Math.abs(currentPos.y - lastPos.y) + 'px'; line.style.top = Math.min(currentPos.y, lastPos.y) + 'px'; line.style.left = Math.min(currentPos.x, lastPos.x) + 'px'; canvas.appendChild(line); lastPos = currentPos; } }); canvas.addEventListener('mouseup', e => { isDrawing = false; }); ``` 在这段代码中，我们首先向画板添加了鼠标事件，并通过 isDrawing 标记该事件是否为绘画事件。接着，在鼠标按下时，我们记录下当前鼠标的位置，并将 isDrawing 设置为 true。在鼠标移动时，如果 isDrawing 为 true，则我们按照鼠标的轨迹绘制出线条，并将线条添加到画板上。在鼠标抬起时，我们将 isDrawing 设置为 false，表示该次绘画事件已经结束。 通过上述代码，我们就可以实现一个简单的画板功能了。当然，这仅仅是一个很基础的例子，我们还可以通过更多的 CSS 技巧来扩展画板的功能。
