初学HTML:在线简易画板设计。

最近在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部分,使用事件监听器来响应鼠标按下、移动和释放的事件。当鼠标按下时,开始绘制路径;当鼠标移动时,继续绘制路径;当鼠标释放或离开画板时,停止绘制路径。使用 offsetXoffsetY 属性获取鼠标相对于画板的位置,并使用 context.beginPath()context.lineTo() 方法来绘制路径。

通过以上代码,可以在浏览器中运行,看到一个简易的在线画板。可以点击并拖动鼠标来自由绘制线条。

相关推荐
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
Eiceblue1 小时前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景2 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾2 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉2 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)3 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js