初学HTML：在线简易画板设计。-Toy模板网

这篇具有很好参考价值的文章主要介绍了初学HTML：在线简易画板设计。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在HTML，记录下一点点成果。设计了一个简易画板，通过HTML的Canvas元素实现一个在线画板，用户可以在上面绘制图形或涂鸦。

下面是运行效果：

初学HTML：在线简易画板设计。,html,javascript,前端

下面是代码：

<!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() 方法来绘制路径。

通过以上代码，可以在浏览器中运行，看到一个简易的在线画板。可以点击并拖动鼠标来自由绘制线条。文章来源地址https://www.toymoban.com/news/detail-651983.html

到了这里，关于初学HTML：在线简易画板设计。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！