JS画板

作者: 袁俊亮技术博客 | 来源:发表于2017-03-24 10:24 被阅读107次

JS画板
canvas2-text
使用vue.js 和fabric.js 制作的canvas 画板
JS detect touch support
画板和参考线 | AI从入门到精通
原生JS做一个画板
《画板》
画板
画板
画板


<!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