Canvas现实画板功能

　　先看图片

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../src/lib/require.js"></script>
        <style>
            input{
                width: 50px;
                border: none;
                text-align: center;
            }
            input[type=range]{
                width: 200px;
            }
            label{
                margin-left: 10px;
            }
            input,label{
                vertical-align: middle;
            }
            canvas{
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div class="m10">
            <canvas id="canvas"></canvas>
            <p><input type="range" name="" id="num" min=0 max=10 value=2><label for="num">线条大小</label><input type="color" name="" id="color"><label for="color">线条颜色</label></p>
        </div>
        
        <script>
            requirejs(['../src/canvas'], function() {});
        </script>
    </body>
</html>

　　Javascript

define([], function() {
    var getId = function(id) {
        return typeof id === 'string' ? document.getElementById(id) : id;
    };

    function getPosition(o) {
        if (!(o && o.nodeName)) {
            return {
                left: 0,
                top: 0
            };
        }
        var t = parseInt(o.offsetTop, 10),
            l = parseInt(o.offsetLeft, 10);
        while (o.offsetParent) {
            o = o.offsetParent;
            t += o.offsetTop;
            l += o.offsetLeft;
        }
        return {
            left: l,
            top: t
        };
    }
    var canvas = getId('canvas'),
        ct = canvas.getContext('2d'),
        w = canvas.width = 600,
        h = canvas.height = 400;
    var bgl = ct.createRadialGradient(400, 0, 0, 400, 0, 400);
    bgl.addColorStop(0, 'red');
    bgl.addColorStop(1, 'green');
    ct.beginPath();

    function draw(ev) {
        console.log(getPosition(canvas));
        var x = ev.clientX - getPosition(canvas).left;
        var y = ev.clientY - getPosition(canvas).top;
        ct.lineTo(x, y);
        ct.stroke();
        console.log(x + '--' + y);
    }
    canvas.onmousedown = function(ev) {
        var x = ev.clientX - getPosition(canvas).left;
        var y = ev.clientY - getPosition(canvas).top;
        var size = getId('num').value;
        var color = getId('color').value;
        ct.save();
        ct.strokeStyle = color;
        ct.lineWidth = size;
        ct.beginPath();
        canvas.onmousemove = draw;
    };
    document.onmouseup = function(ev) {
        canvas.onmousemove = null;
        ct.closePath();
        //ct.fill();
        ct.restore();
    };
});