JS画板

作者: 袁俊亮技术博客 | 来源:发表于2017-03-24 10:24 被阅读107次
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>画图板</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                position: relative;
                height: 100%;
                overflow: hidden;
            }
    
            .ctrls {
                position: absolute;
                top: 0;
                left: 0;
                padding: 5px;
                outline: solid 1px #ccc;
            }
    
            .ctrls > div {
                margin-top: 10px;
            }
    
            .ctrls > div > label {
                display: inline-block;
                padding-right: 10px;
                width: 90px;
                text-align: right;
            }
    
            .ctrls button {
                width: 100%;
            }
    
        </style>
    </head>
    <body>
    <canvas id="can"></canvas>
    <div class="ctrls">
        <div>
            <label for="val-color">Color: </label><input type="color" id="val-color" value="#00aced"/>
        </div>
        <!--<div><label for="val-r">R:</label><input type="text" maxlength="3" id="val-r"/></div>-->
        <!--<div><label for="val-g">G:</label><input type="text" maxlength="3" id="val-g"/></div>-->
        <!--<div><label for="val-b">B:</label><input type="text" maxlength="3" id="val-b"/></div>-->
        <div>
            <label for="val-linewidth">Line Width: </label><input type="text" id="val-linewidth" size="3" value="3"/>
        </div>
        <div>
            <button id="btn-clear">Clear</button>
        </div>
    </div>
    
    <script>
        (function () {
            var can = document.getElementById('can');
            var oColor = document.getElementById('val-color');
            var btnClear = document.getElementById('btn-clear');
            var oLinewidth = document.getElementById('val-linewidth');
            can.width = document.body.clientWidth || document.documentElement.clientWidth;
            can.height = document.body.clientHeight || document.documentElement.clientHeight;
    
            var oldPoint, newPoint;
    
            oLinewidth.onkeyup = oLinewidth.onblur = function () {
                limitNumber(this, 100);
            };
    
            btnClear.onclick = function () {
                if (can.getContext) {
                    var ctx = can.getContext('2d');
                    ctx.save();
                    ctx.clearRect(0, 0, can.width, can.height);
                    ctx.restore();
                }
            };
    
    
            /**
             * 限制输入框的值
             * @param oInput
             * @param max
             */
            function limitNumber(oInput, max) {
                oInput.value = oInput.value.replace(/^0|[^(0-9)]/, '');
    
                if (oInput.value > max) {
                    oInput.value = oInput.value.slice(0, -1);
                }
            }
    
            /**
             * 画点
             * @param event
             * @param color
             * @param lineWidth
             */
            function drawPoint(event, color, lineWidth) {
                if (can.getContext) {
                    var ctx = can.getContext('2d');
                    var x = event.clientX;
                    var y = event.clientY;
                    ctx.save();
                    ctx.beginPath();
                    ctx.moveTo(x, y);
    
                    ctx.fillStyle = color;
                    ctx.lineWidth = lineWidth;
                    ctx.arc(x, y, lineWidth, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.restore();
                }
            }
    
            /**
             * 画线
             * @param event
             * @param color
             * @param lineWidth
             */
            function lineTo(event, color, lineWidth) {
                if (can.getContext) {
                    var ctx = can.getContext('2d');
    
                    newPoint = {
                        x: event.clientX,
                        y: event.clientY
                    };
    
                    ctx.save();
                    ctx.beginPath();
                    ctx.moveTo(oldPoint.x, oldPoint.y);
                    ctx.lineTo(newPoint.x, newPoint.y);
                    ctx.lineCap = 'round'; // 圆
                    ctx.lineWidth = lineWidth;
                    ctx.strokeStyle = color;
                    ctx.stroke();
    
                    oldPoint = newPoint;
                }
            }
    
            can.onmousedown = function (event) {
                var ev = event || window.event;
                oldPoint = {
                    x: ev.clientX,
                    y: ev.clientY
                };
                var color = oColor.value;
                var lineWidth = (oLinewidth.value ? oLinewidth.value : 3);
                // 画点
                drawPoint(ev, color, lineWidth / 2);
    
                document.onmousemove = function (event) {
                    var ev = event || window.event;
                    // 画线
                    lineTo(ev, color, lineWidth);
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                };
            };
        })();
    </script>
    </body>
    </html>
    

    源码地址:https://js-fu.github.io/demo/pc/drawing-board.html

    相关文章

      网友评论

          本文标题:JS画板

          本文链接:https://www.haomeiwen.com/subject/muixottx.html