Canvasで落書き 2.1.0 - みかづきブログその3

3ヶ月近く放置してしまいましたが、以前つくった落書き用Canvas をベジェ曲線にして滑らかにしてみました。

DEMO

ドラッグすると線が引けます。赤い線が前回までと同様にPointを直線でつないだもの、青い線がベジェ曲線でつないだものです。
急激にマウスを動かすと違いがわかりやすいです。

HTML

<canvas id="canvas"></canvas>
<p id="fps"></p>

CSS

* {
    margin: 0; padding: 0;
}

#fps {
    position: absolute;
    top: 10px; left: 10px;
    -webkit-user-select: none;
}

body {
    background: #ccc;
    overflow: hidden;
}

JavaScript

(function(win, doc, ns) {

    "use strict";

    var ticker      = new ns.Ticker(60),
        lineManager = ns.LineManager.getInstance(),
        canvas      = doc.getElementById("canvas"),
        ctx         = canvas.getContext("2d"),
        fps         = doc.getElementById("fps"),
        START_EVENT = "mousedown",
        MOVE_EVENT  = "mousemove",
        END_EVENT   = "mouseup";

    setup();

    function setup() {
        addSketchEventForCanvas(canvas);

        ticker.addEventListener("tick", function(evt) {
            fps.innerHTML = evt.measuredFPS;
            update(evt.delta);
            draw();
        });

        ticker.start();
    }

    function update(delta) {
    }

    function draw() {
        canvas.width = win.innerWidth;
        canvas.height = win.innerHeight;
        ctx.lineWidth = 4;
        ctx.lineCap = "round";
        ctx.save();
            ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
            lineManager.draw(ctx);
        ctx.restore();
        ctx.save();
            ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
            lineManager.drawQuadraticCurve(ctx);
        ctx.restore();
    }

    function addSketchEventForCanvas(elm) {
        var throttle     = new ns.Throttle(10, handleThrottleMoveEvent),
            ctx          = elm.getContext("2d"),
            positionList = [],
            index = 0;
        
        elm.addEventListener(START_EVENT, handleStartEvent, false);
        doc.addEventListener(END_EVENT,   handleEndEvent,   false);

        function handleThrottleMoveEvent(evt) {
            lineManager.addPoint(new ns.Point(evt.offsetX, evt.offsetY));
        }
        
        function handleStartEvent(evt) {
            lineManager.push(new ns.Line(new ns.Point(evt.offsetX, evt.offsetY)));
            elm.addEventListener(MOVE_EVENT, handleMoveEvent, false);
        }
        
        function handleMoveEvent(evt) {
            throttle.fireEvent(evt);
        }
        
        function handleEndEvent(evt) {
            elm.removeEventListener(MOVE_EVENT, handleMoveEvent, false);
        }
    }

})(this, document, App);

事前にクラスをつくっておいたので、今回はそれらを組み合わせるだけでした。
今回は以上です。