HTML5 Canvas パスの描画 | サウンドの視覚化

PATH TYPE
STROKE COLOR
FILL COLOR
: 1
(function() {

    var onDOMContentLoaded = function() {
        var canvas  = document.querySelector('canvas');
        var context = canvas.getContext('2d');

        var cw = canvas.width;
        var ch = canvas.height;

        var styles = {
            stroke : 'rgba(0, 0, 0, 1.0)',
            fill   : 'rgba(0, 0, 0, 1.0)',
            width  : document.getElementById('range-width').valueAsNumber
        };

        var strokeTriangle = function() {
            var padding = 25;

            context.beginPath();
            context.moveTo((parseInt((cw - 2 * padding) / 2) + padding), padding);
            context.lineTo((cw - padding), (ch - padding));
            context.lineTo(padding, (ch - padding));
            context.closePath();

            if (styles.stroke !== 'none') {
                context.strokeStyle = styles.stroke;
                context.lineWidth   = styles.width;
                context.stroke();
            }

            if (styles.fill !== 'none') {
                context.fillStyle = styles.fill;
                context.fill();
            }
        };

        var strokeRect = function() {
            var padding = 25;

            context.beginPath();
            context.moveTo(padding, padding);
            context.lineTo((cw - padding), padding);
            context.lineTo((cw - padding), (ch - padding));
            context.lineTo(padding, (ch - padding));
            context.closePath();

            if (styles.stroke !== 'none') {
                context.strokeStyle = styles.stroke;
                context.lineWidth   = styles.width;
                context.stroke();
            }

            if (styles.fill !== 'none') {
                context.fillStyle = styles.fill;
                context.fill();
            }
        };

        var drawX = function() {
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(cw, ch);
            context.moveTo(cw, 0);
            context.lineTo(0, ch);

            if (styles.stroke !== 'none') {
                context.strokeStyle = styles.stroke;
                context.lineWidth   = styles.width;
                context.stroke();
            }
        };

        // Initial path
        strokeTriangle();

        document.getElementById('form-path-type').addEventListener('change', function() {
            for (var i = 0, len = this.elements['radio-path-type'].length; i < len; i++) {
                if (this.elements['radio-path-type'][i].checked) {
                    switch (this.elements['radio-path-type'][i].value) {
                        case 'triangle' : strokeTriangle(); break;
                        case 'rect'     : strokeRect(); break;
                        case 'x'        : drawX(); break;
                        case 'clear'    : context.clearRect(0, 0, cw, ch); break;
                        default         : break;
                    }

                    break;
                }
            }
        }, false);

        document.getElementById('form-stroke-color').addEventListener('change', function() {
            for (var i = 0, len = this.elements['radio-stroke-color'].length; i < len; i++) {
                if (this.elements['radio-stroke-color'][i].checked) {
                    styles.stroke = this.elements['radio-stroke-color'][i].value;
                    break;
                }
            }
        }, false);

        document.getElementById('form-fill-color').addEventListener('change', function() {
            for (var i = 0, len = this.elements['radio-fill-color'].length; i < len; i++) {
                if (this.elements['radio-fill-color'][i].checked) {
                    styles.fill = this.elements['radio-fill-color'][i].value;
                    break;
                }
            }
        }, false);

        document.getElementById('range-width').addEventListener('input', function() {
            styles.width = this.valueAsNumber;
            document.getElementById('output-width').textContent = this.value;
        }, false);
    };

    if ((document.readyState === 'interactive') || (document.readyState === 'complete')) {
        onDOMContentLoaded();
    } else {
        document.addEventListener('DOMContentLoaded', onDOMContentLoaded, true);
    }

})();
function EventWrapper(){
}

(function(){
    var click = '';
    var start = '';
    var move  = '';
    var end   = '';

    // Touch Panel ?
    if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
        click = 'click';
        start = 'touchstart';
        move  = 'touchmove';
        end   = 'touchend';
    } else {
        click = 'click';
        start = 'mousedown';
        move  = 'mousemove';
        end   = 'mouseup';
    }

    EventWrapper.CLICK = click;
    EventWrapper.START = start;
    EventWrapper.MOVE  = move;
    EventWrapper.END   = end;
})();