master

分支 (1)

管理

管理

master

board
/
index.html

<!DOCTYPE html>
<html lang="zh">

<!--  by AlbertZ -->

<head>
    <title>Point Board</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css" />
</head>
<body class="mdui-theme-accent-indigo">
    <div class="board">
        <canvas id="canvas">
        </canvas>
        <div id="leftbox">
            <button class="btn mdui-btn mdui-ripple" mdui-menu="{target: '#opt-menu'}">
                <i class="mdui-icon material-icons">menu</i> 选项
            </button>
            <ul class="mdui-menu" id="opt-menu">
                <li class="mdui-menu-item" id="btn-fs">
                    <a href="javascript:requestFullscreen();" class="mdui-ripple">
                        <i class="mdui-icon material-icons">fullscreen</i> 全屏
                    </a>
                </li>
                <li class="mdui-menu-item" id="btn-efs">
                    <a href="javascript:exitFullScreen();" class="mdui-ripple">
                        <i class="mdui-icon material-icons">fullscreen_exit</i> 退出全屏
                    </a>
                </li>
                <li class="mdui-menu-item" id="btn-efs">
                    <a href="javascript:saveCanvas();" class="mdui-ripple">
                        <i class="mdui-icon material-icons">save</i> 保存
                    </a>
                </li>
                <li class="mdui-menu-item" id="btn-efs">
                    <a href="javascript:closeWindow();" class="mdui-ripple">
                        <i class="mdui-icon material-icons">close</i> 关闭
                    </a>
                </li>
            </ul>
        </div>
        <div id="toolbox">
            <button class="btn mdui-btn mdui-ripple" id="btn-brush" onclick="setBrush()" mdui-menu="{target: '#brush-menu'}">
                <i class="mdui-icon material-icons">brush</i> 画笔
            </button>
            <div class="mdui-menu" id="brush-menu">
                <label>画笔粗细</label>
                <label class="mdui-slider mdui-slider-discrete">
                    <input type="range" step="1" min="1" max="12" value="3" id="slider-lw" onchange="setLineWidth()" />
                </label>
                <label style="margin-top: 15px;">画笔颜色</label>
                <input type="color" id="select-color" value="#ffffff" onchange="setLineColor()">
            </div>
            <button class="btn mdui-btn mdui-ripple" id="btn-eraser" onclick="setEraser()">
                <i class="mdui-icon material-icons">indeterminate_check_box</i> 橡皮
            </button>
            <button class="btn mdui-btn mdui-ripple" onclick="clearCanvas()">
                <i class="mdui-icon material-icons">clear_all</i> 清除
            </button>
            <button class="btn mdui-btn mdui-ripple" onclick="undo()">
                <i class="mdui-icon material-icons">undo</i> 撤销
            </button>
            <button class="btn mdui-btn mdui-ripple" onclick="redo()">
                <i class="mdui-icon material-icons">redo</i> 重做
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
    <script src="canvas.js"></script>
</body>
</html>