CANVAS 画画工具 | 在线音乐画板

Ambient Canvas 带画笔、橡皮、颜色轮。画画时，还有轻音乐伴奏。

CANVAS, paint

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4445
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Additional array function
Array.prototype.rotate = function(n) {
    this.unshift.apply(this, this.splice(n, this.length))
    return this;
}

// Instruments and effects
var freeverb = new Tone.Freeverb(0.5, 2000).toMaster();
var polySynth = new Tone.PolySynth(4, Tone.FMSynth, {
    "volume": -3,
    "harmonicity": 0.5,
    "modulationIndex": 1.2,
    "oscillator": {
        "type": "fmsawtooth",
        "modulationType": "sine",
        "modulationIndex": 20,
        "harmonicity": 5
    },
    "envelope": {
        "attack": 1,
        "decay": 2,
        "sustain": 2,
        "release": 2
    },
    "modulation": {
        "type": "triangle"
    },
    "modulationEnvelope": {
        "attack": 0.5,
        "decay": 0.25,
        "sustain": 0.25,
        "release": 0.5
    }
}).connect(freeverb);
var ampEnv = new Tone.AmplitudeEnvelope({
    "attack": 0.5,
    "decay": 0.2,
    "sustain": 5,
    "release": 15
}).connect(freeverb);
var player1 = new Tone.Player({
    "loop": true,
    "volume": -12
}).connect(ampEnv);
var player2 = new Tone.Player({
    "loop": true,
    "volume": -12
}).connect(ampEnv);
var player3 = new Tone.Player({
    "loop": true,
    "volume": -12
}).connect(ampEnv);

// Very helpful plugin - https://gist.github.com/mekwall/1263939
(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function() {
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth / ourText.width(),
                newSize = (fontSize * (multiplier - 0.1));
            ourText.css(
                "fontSize", (maxFontSize > 0 && newSize > maxFontSize) ?
                maxFontSize :
                newSize
            );
        });
    };
})(jQuery);

// Main App
(function($, window, document, undefined) {
    "use strict";

var APP = {
        init: function() {
            this.canvas = $('#canvas')[0];
            this.canvasContext = canvas.getContext('2d');
            this.gridCanvas = $('#gridCanvas')[0];
            this.gridCanvasContext = gridCanvas.getContext('2d');
            this.paint = false;
            this.currentThickness = 48;
            this.previousPoint = [0, 0];
            this.currentColor = '#ff4351';
            this.currentTool = 'pencil';
            this.pencil = document.getElementsByClassName('pencil');
            this.currentBeat = 0;
            this.currentRange = 3;
            this.playing = false;
            this.currentChord = [];
            this.canvas.width = 1200;
            this.canvas.height = 960;
            this.gridCanvas.width = 1200;
            this.gridCanvas.height = 960;
            this.gridCanvasContext.textAlign = "center";
            this.notesArray = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
            this.modulateAmount = 0;
            this.key = [];
            this.chords = [];
            this.chordIntervals = [
                [0, 4, 7, 11],
                [2, 5, 9, 12],
                [4, 7, 11, 14],
                [6, 9, 12, 15],
                [7, 11, 14, 18],
                [9, 12, 16, 19],
                [11, 14, 18, 21]
            ]; // Lydian mode chord progression, bit mysterious,somewhat ambient
            this.segmentNames = ["III", "VI", "II", "IV", "V", "VII", "I", "VII", "V", "IV", "II", "VI", "III"];
            this.horizontalSegmentNames = ["Plus a 7th", "Plus a 5th", "Plus a 3rd", "Root Note"];
            this.segmentIndexes = [2, 5, 1, 3, 4, 6, 0, 6, 4, 3, 1, 5, 2];
            this.segmentEndPoints = [1, 2, 4, 6, 9, 12, 16, 19, 22, 24, 26, 27, 28];
            this.segmentWidth = this.gridCanvas.width / 28;
            this.segmentHeight = this.gridCanvas.height / 4;

this.demoPaint();
            $("#text-container-right").textfill();
            this.setGridFontsize();
            this.setKey();
            this.setChords();
            this.setUpListeners();
            this.setUpPlayers();
            this.setSynth(0);
        },

// Sets up all button listeners and a resizing listener
        setUpListeners: function() {

// Change color of other elements when new color selected
            $('.color').on('click', function() {
                $('.color.active').removeClass('active');
                $(this).addClass('active');
                APP.currentColor = $(this).data('color');
                $("#pencil-backing").css("background-color", APP.currentColor);
                $("#pencil-backing").css("color", APP.currentColor);
                $("#pencil-image").css("outline-color", APP.currentColor);
                if (APP.currentTool == 'pencil') {
                    $(".thickness").css("color", APP.currentColor);
                };
                APP.setSynth($(this).data('color-number'));
            });

// Line thickness change
            $('.thickness').on('click', function() {
                $('.thickness.active').removeClass('active');
                $(this).addClass('active');
                APP.currentThickness = $(this).data('thickness');
                polySynth.set({
                    "volume": parseInt($(this).data('volume'))
                });
            });

// Pencil tool seclection
            $('#pencil-image').on('click', function() {
                $('#eraser-image').removeClass('active');
                $(this).addClass('active');
                $(".thickness").css("color", APP.currentColor);
                APP.currentTool = $(this).data('tool');
            });

// Eraser tool selection
            $('#eraser-image').on('click', function() {
                $('#pencil-image').removeClass('active');
                $(this).addClass('active');
                $(".thickness").css("color", "#FFF");
                APP.currentTool = $(this).data('tool');
            });

// Beat selection
            $('.beat-button').on('click', function() {
                $('.beat-button.active').removeClass('active');
                $(this).addClass('active');
                if ($(this).data('beat') !== APP.currentBeat) {
                    APP.currentBeat = $(this).data('beat');
                    APP.setBeat();
                }
            });

// Clear canvas button
            $('#clear-button').on('click', function() {
                APP.clearCanvas();
                APP.setKey();
                APP.setChords();
            });

// Mouse movement, update location and paint
            $(gridCanvas).on('mousemove', function(e) {
                var x = e.offsetX * 2;
                var y = e.offsetY * 2;
                if (APP.paint) {
                    APP.drawLine(x, y);
                }
            });

// Mouse pressed on canvas
            $(gridCanvas).on('mousedown', function(e) {
                var pos = APP.getMousePos(APP.gridCanvas, e);
                APP.previousPoint = [(e.offsetX * 2), e.offsetY * 2];
                APP.canvasContext.beginPath();
                APP.canvasContext.moveTo(APP.previousPoint[0], APP.previousPoint[1]);
                APP.paint = true;
                ampEnv.triggerAttack();
                if (APP.currentTool == 'pencil') {
                    APP.setCurrentChord(pos.x, pos.y);
                    polySynth.triggerAttack(APP.currentChord);
                };
            });

// Mouse released or leaves canvas area
            $(gridCanvas).on('mouseup mouseleave', function() {
                APP.paint = false;
                APP.canvasContext.closePath();
                ampEnv.triggerRelease();
                if (APP.currentTool == 'pencil') {
                    polySynth.triggerRelease(APP.currentChord);
                };
            });

// Overlay selector
            $('input[name=musicInfo]').change(function() {
                if ($(this).is(':checked')) {
                    APP.overlayGrid();
                    $("#text-container-right").css({
                        "opacity": 1
                    });
                } else {
                    APP.clearGridCanvas();
                    $("#text-container-right").css({
                        "opacity": 0
                    });
                }
            });

// Window resizing
            $(window).on('resize', function() {
                APP.textFill();
            });

// Clears painting canvas
        clearCanvas: function() {
            this.canvasContext.clearRect(0, 0, 1200, 960);
        },

// Painting functions
        clearGridCanvas: function() {
            this.gridCanvasContext.clearRect(0, 0, 1200, 960);
        },

// Draws the initial quaver on the canvas
        demoPaint: function() {
            this.drawLine(700, 260);
            this.drawLine(600, 260);
            this.drawLine(600, 650);
            this.drawLine(550, 700);
            this.drawLine(500, 650);
            this.drawLine(550, 600);
            this.drawLine(600, 650);
        },

// Draws a line
        drawLine: function(x, y) {
            this.canvasContext.lineTo(x, y);
            this.canvasContext.lineWidth = this.currentThickness;
            if (this.currentTool === "eraser") {
                this.canvasContext.strokeStyle = '#FFF';
            } else {
                this.canvasContext.strokeStyle = this.currentColor;
            }
            this.canvasContext.lineCap = 'round';
            this.canvasContext.lineJoin = 'round';
            this.canvasContext.stroke();
            this.previousPoint = [x, y];
        },

// Traslate chords from intervals to notes accepted by tone.js instruments
        getChordNotes: function(chordIndexes) {
            var chord = [],
                interval = 0,
                octave = "";

for (var i = 0; i < chordIndexes.length; i++) {
                interval = chordIndexes[i];

if (interval < 0 - this.modulateAmount) {
                    octave = "2";
                } else if (interval < 12 - this.modulateAmount) {
                    octave = "3";
                } else if (interval < 24 - this.modulateAmount) {
                    octave = "4";
                } else if (interval < 36 - this.modulateAmount) {
                    octave = "5";
                } else {
                    octave = "6";
                }

while (interval < 0 || interval > 11) {
                    if (Math.sign(interval) == 1) {
                        interval -= 12;
                    } else {
                        interval += 12;
                    }
                }
                chord[i] = this.notesArray[interval].concat(octave);
            }
            return chord;
        },

// Get current mouse position on canvas
        getMousePos: function(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        },

// Overlays Grid on canvas
        overlayGrid: function() {
            this.clearGridCanvas();
            this.gridCanvasContext.save();
            this.gridCanvasContext.lineWidth = 2;
            this.gridCanvasContext.strokeStyle = 'rgba(0,0,0,0.5)';
            var previousWidth = 0,
                j = 0;

// Horizontally split sections
            for (var i = 0; i <= this.gridCanvas.height; i = i + this.gridCanvas.height / 4) {
                this.gridCanvasContext.beginPath();
                this.gridCanvasContext.moveTo(0, i);
                this.gridCanvasContext.lineTo(gridCanvas.width, i);
                this.gridCanvasContext.closePath();
                this.gridCanvasContext.stroke();
                this.gridCanvasContext.fillText(this.horizontalSegmentNames[j], 50, i + (this.gridCanvas.height / 8));
                this.gridCanvasContext.fillText(this.horizontalSegmentNames[j], this.gridCanvas.width - 50, i + (this.gridCanvas.height / 8));
                j++;
            };

// Vertically split sections
            for (var i = 0; i <= this.gridCanvas.width; i++) {
                this.gridCanvasContext.beginPath();
                this.gridCanvasContext.moveTo(this.segmentWidth * this.segmentEndPoints[i], 0);
                this.gridCanvasContext.lineTo(this.segmentWidth * this.segmentEndPoints[i], this.gridCanvas.height);
                this.gridCanvasContext.closePath();
                this.gridCanvasContext.stroke();
                this.gridCanvasContext.fillText(this.segmentNames[i], (this.segmentWidth * this.segmentEndPoints[i]) - (this.segmentWidth * (this.segmentEndPoints[i] - previousWidth) / 2), this.gridCanvas.height - 50);
                this.gridCanvasContext.fillText(this.segmentNames[i], (this.segmentWidth * this.segmentEndPoints[i]) - (this.segmentWidth * (this.segmentEndPoints[i] - previousWidth) / 2), 50);
                previousWidth = this.segmentEndPoints[i];
            }
            this.gridCanvasContext.restore();
        },

// Start or stop the correct players
        setBeat: function() {
            if (this.currentBeat == 0) {
                player1.start();
                player2.stop();
                player3.stop();
            } else if (this.currentBeat == 1) {
                player1.stop();
                player2.start();
                player3.stop();
            } else if (this.currentBeat == 2) {
                player1.stop();
                player2.stop();
                player3.start();
            } else {
                console.error("This beat doesn't exist");
            }
        },

// Sets current chord to play/stop
        setChords: function(x, y) {
            for (var i = 0; i < this.chordIntervals.length; i++) {
                this.chords[i] = this.getChordNotes(this.chordIntervals[i]);
            };
        },

// Set the current chord relative to mousedown position on canvas
        setCurrentChord: function(x, y) {
            // Set chord relative to vertical grid segements
            var numerator = Math.floor(Math.floor(x) / (this.gridCanvas.width / 2 / 28)),
                index = 0,
                multiplier = 1,
                fullChord = [];
            while (numerator >= this.segmentEndPoints[index]) {
                index++;
            }
            fullChord = this.chords[this.segmentIndexes[index]];

// Set number of notes from full chord to play based horizontal grid segements
            while (Math.floor(y) > (this.gridCanvas.height / 8) * multiplier) {
                multiplier++;
            }
            this.currentChord = fullChord.slice(0, (5 - multiplier));
        },

// Calculates the appropriate font size for the font awesome icons
        setGridFontsize: function() {
            var fontSize = $("#gridCanvas").width() / 28, // 50% of container width
                fontText = fontSize.toString().concat("px Roboto Condensed");
            this.gridCanvasContext.font = fontText;
        },

// Sets the key for the chord progressions generated and shifts the master array of notes by the correct amount
        setKey: function() {
            this.modulateAmount = Math.floor(Math.random() * (11 - 0 + 1)) + 0;
            this.notesArray.rotate(this.modulateAmount);
            this.key = this.notesArray[0];
        },

// Give each colour different synth sound properties
        setSynth: function(sliceNumber) {
            var typeList = ["sine", "square", "triangle", "sawtooth"];
            polySynth.set({
                "modulationIndex": sliceNumber % 12,
                "harmonicity": (sliceNumber % 6) * 0.5,
                "oscillator": {
                    "type": typeList[sliceNumber % 4]
                },
                "modulation": {
                    "type": typeList[4 - (sliceNumber % 4)]
                }
            });
        },

// Load audio into the sample players
        setUpPlayers: function() {
            self = this;
            player1.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/713593/beatA.mp3", function() {
                self.setBeat();
            });
            player2.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/713593/beatB.mp3");
            player3.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/713593/beatC.mp3");
        }
    };

APP.init();
})(jQuery, window, document);

编译

CSS

/* Variables */
/* Mixins */
/* Loops */

.slice:nth-child(1) {
    background: #ff4351;
    transform: rotate(0deg) skewY(-60deg);
}
.slice:nth-child(2) {
    background: #fd6631;
    transform: rotate(30deg) skewY(-60deg);
}
.slice:nth-child(3) {
    background: #fc880f;
    transform: rotate(60deg) skewY(-60deg);
}
.slice:nth-child(4) {
    background: #feae1b;
    transform: rotate(90deg) skewY(-60deg);
}
.slice:nth-child(5) {
    background: #ffd426;
    transform: rotate(120deg) skewY(-60deg);
}
.slice:nth-child(6) {
    background: #a5de37;
    transform: rotate(150deg) skewY(-60deg);
}
.slice:nth-child(7) {
    background: #49e845;
    transform: rotate(180deg) skewY(-60deg);
}
.slice:nth-child(8) {
    background: #55dae1;
    transform: rotate(210deg) skewY(-60deg);
}
.slice:nth-child(9) {
    background: #1b9af7;
    transform: rotate(240deg) skewY(-60deg);
}
.slice:nth-child(10) {
    background: #7b72e9;
    transform: rotate(270deg) skewY(-60deg);
}
.slice:nth-child(11) {
    background: #db49d8;
    transform: rotate(300deg) skewY(-60deg);
}
.slice:nth-child(12) {
    background: #ed4694;
    transform: rotate(330deg) skewY(-60deg);
}
.thickness:nth-child(1):after {
    width: 5px;
    height: 5px;
}
.thickness:nth-child(2):after {
    width: 10px;
    height: 10px;
}
.thickness:nth-child(3):after {
    width: 15px;
    height: 15px;
}
.thickness:nth-child(4):after {
    width: 20px;
    height: 20px;
}
/* Placeholders */

.container-left,
.container-right,
#text-container-right {
    flex-basis: auto;
    flex-grow: 1;
    order: 0;
    align-self: auto;
    -webkit-flex-basis: auto;
    -webkit-flex-grow: 1;
    -webkit-order: 0;
    -webkit-align-self: auto;
    text-align: center;
    margin: 10px;
}
/* Typical elements */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    user-select: none;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
}
body {
    width: 100vw;
    height: 100vh;
    background-color: #292929;
    background-size: cover;
    background-position: center center;
}
/* Text */

h1 {
    position: relative;
    color: #ccc;
    font-size: 18px;
}
p {
    color: #ccc;
    font-size: 12px;
}
ul {
    color: #ccc;
}
/* Classes by Name A-Z */

.color {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    cursor: pointer;
    transform: skewY(60deg);
}
.color.active {
    cursor: default;
}
.color.active:after {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 30%;
    margin: 0px 0px;
    transform: rotate(15deg);
}
.color-option {
    position: relative;
    width: 150px;
    height: 150px;
    background: #000;
    border: solid 5px #000;
    border-radius: 50%;
    margin: 5px 5px;
    overflow: hidden;
}
.container-left {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
    -webkit-display: "-webkit-flex";
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    -webkit-align-items: center;
    -webkit-align-content: stretch;
}
.container-right,
#text-container-right {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    -webkit-display: "-webkit-flex";
    -webkit-flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: center;
    -webkit-align-content: stretch;
}
#text-container-right {
    flex-basis: auto;
    flex-grow: 2;
    order: 0;
    align-self: auto;
    -webkit-flex-basis: auto;
    -webkit-flex-grow: 2;
    -webkit-order: 0;
    -webkit-align-self: auto;
    text-align: left;
    color: #ccc;
    opacity: 0;
    filter: alpha(opacity=0);
}
.fa {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ccc;
    transform: translate(-50%, -50%);
}
.item-text {
    align-self: flex-start;
    -webkit-align-self: flex-start;
    margin: 5px 5px;
}
.slice {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    transform-origin: 0% 100%;
}
.slice:hover {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
.slider {
    position: absolute;
    align-self: flex-start;
    -webkit-align-self: flex-start;
    width: 100px;
    height: 15px;
    background: #555;
    border-radius: 10px;
    margin: 10px 15px;
}
.slider.musicInfo {
    position: relative;
}
.slider label {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 35px;
    height: 35px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}
.slider input[type=checkbox]:checked + label {
    left: 70px;
}
.sprite {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/713593/ambientCanvasSpriteSheet.png") no-repeat;
}
/* Tags by name A-Z */

#beat-option {
    position: relative;
    margin: 5px 5px;
    text-align: center;
    align-self: flex-start;
    -webkit-align-self: flex-start;
}
#beat-option .beat-button {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0;
    outline-color: initial;
    border: 1px solid;
    opacity: 0.5;
    filter: alpha(opacity=50);
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #CCC;
    display: inline-block;
    line-height: 35px;
}
#beat-option .beat-button:hover {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0;
    outline-color: initial;
    border: 2px solid;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
#beat-option .beat-button.active {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0;
    outline-color: initial;
    border: 3px solid;
    opacity: 1;
    filter: alpha(opacity=100);
    line-height: 33px;
}
#canvas,
#gridCanvas {
    width: 600px;
    height: 480px;
    position: fixed;
    top: calc(50% - 200px);
    left: calc(50% - 300px);
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    cursor: crosshair;
}
#clear-button {
    position: relative;
    align-self: flex-start;
    -webkit-align-self: flex-start;
    width: 100px;
    height: 100px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border: 4px solid #ccc;
    border-radius: 50%;
    margin: 5px 5px;
    text-align: center;
}
#clear-button:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
}
#clear-button:active {
    opacity: 0.75;
    filter: alpha(opacity=75);
    transform: scale(0.97);
}
#gridCanvas {
    background: transparent;
}
#eraser-image {
    position: relative;
    align-self: flex-end;
    -webkit-align-self: flex-end;
    width: 50px;
    height: 100px;
    background-position: -200px 0px;
    margin: 5px 5px;
}
#eraser-image:hover {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0px;
    outline-color: initial;
    border: 0;
}
#eraser-image.active {
    cursor: pointer;
    outline-style: dashed;
    outline-offset: 3px;
    outline-color: #FFF;
    border: 0;
}
input[type=checkbox] {
    visibility: hidden;
}
#pencil {
    align-self: flex-end;
    -webkit-align-self: flex-end;
    margin: 5px 5px;
}
#pencil-backing {
    width: 50px;
    height: 160px;
    position: absolute;
    background: #ff4351;
    color: #ff4351;
    margin-top: 40px;
}
#pencil-backing:before {
    width: 0;
    height: 0;
    position: absolute;
    top: -40px;
    left: 0;
    border-bottom: 40px solid;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    content: "";
}
#pencil-image {
    width: 50px;
    height: 200px;
    position: relative;
    background-position: -150px 0px;
    color: #ff4351;
}
#pencil-image:hover {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0px;
    outline-color: initial;
    border: 0;
}
#pencil-image.active {
    cursor: pointer;
    outline-style: dashed;
    outline-offset: 3px;
    outline-color: #ff4351;
    border: 0;
}
#panel-left,
#panel-right {
    position: fixed;
    top: calc(50% - 200px);
    left: calc(50% - 600px);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    -webkit-display: "-webkit-flex";
    -webkit-flex-direction: column;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: stretch;
    -webkit-align-content: stretch;
    width: 300px;
    height: 480px;
}
#panel-right {
    left: calc(50% + 300px);
}
#thickness-option {
    opacity: 0.5;
    filter: alpha(opacity=50);
    width: 60px;
    height: 200px;
    position: relative;
    align-self: flex-end;
    -webkit-align-self: flex-end;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    margin: 5px 5px;
    text-align: center;
}
#thickness-option .thickness {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ff4351;
    display: inline-block;
}
#thickness-option .thickness:after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}
#thickness-option .thickness:hover {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0;
    outline-color: initial;
    border: 2px solid;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
#thickness-option .thickness.active {
    cursor: pointer;
    outline-style: none;
    outline-offset: 0;
    outline-color: initial;
    border: 3px solid;
    opacity: 1;
    filter: alpha(opacity=100);
}

HTML

<div id="panel-left">
    
    <div class="container-left">
        <div id="thickness-option">
            <div class="thickness" data-thickness="4" data-volume="-12"></div>
            <div class="thickness" data-thickness="12" data-volume="-9"></div>
            <div class="thickness" data-thickness="24" data-volume="-6"></div>
            <div class="thickness active" data-thickness="48" data-volume="-3"></div>
        </div>
        <div id="pencil">
            <div id="pencil-backing"></div>
            <div id="pencil-image" class="sprite active" data-tool="pencil"></div>
        </div>
        <div id="eraser-image" class="sprite" data-tool="eraser"></div>
    </div>
    
    <div class="container-left">
        <div class="color-option">
            <div class="slice">
                <div class="color active" data-color="#ff4351" data-color-number="1"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#fd6631" data-color-number="2"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#fc880f" data-color-number="3"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#feae1b" data-color-number="4"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#ffd426" data-color-number="5"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#a5de37" data-color-number="6"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#49e845" data-color-number="7"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#55dae1" data-color-number="8"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#1b9af7" data-color-number="9"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#7b72e9" data-color-number="10"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#db49d8" data-color-number="11"></div>
            </div>
            <div class="slice">
                <div class="color" data-color="#ed4694" data-color-number="12"></div>
            </div>
        </div>
    </div>
</div>

<div id="panel-right">
    <div class="container-right">
        <div id="clear-button">
            <i class="fa fa-refresh fa-4x"></i>
        </div>
    </div>
    <div class="container-right">
        <h1 class="item-text">BEAT</h1>
        <nav id="beat-option">
            <div class="beat-button active" data-beat="0">
                <p>1</p>
            </div>
            <div class="beat-button" data-beat="1">
                <p>2</p>
            </div>
            <div class="beat-button" data-beat="2">
                <p>3</p>
            </div>
        </nav>
    </div>
    <div class="container-right">
        <h1 class="item-text">OVERLAY</h1>
        <div class="slider musicInfo">
            <input type="checkbox" value="0" id="musicInfoSlider" name="musicInfo" />
            <label for="musicInfoSlider"></label>
        </div>
    </div>
    <div id="text-container-right">
        <span> &#8226 Touch down on the canvas to hear sound.<br> 
    &#8226 Position determines the note or chord played.<br>
    &#8226 Colour determines the timbre.<br>
      &#8226 Paint something beautiful.</span>
    </div>
</div>
<script src="https://raw.githubusercontent.com/jquery-textfill/jquery-textfill/master/source/jquery.textfill.js"></script>
<script src="/uploads/160901/Tone.js"></script>

Ambient Canvas 带画笔、橡皮、颜色轮。画画时，还有轻音乐伴奏。

CANVAS, paint

编辑器支持Emmet

快捷键

Ambient Canvas 带画笔、橡皮、颜色轮。画画时，还有轻音乐伴奏。

CANVAS, paint

CANVAS 在文本下动态画多边形

CANVAS 酷酷的连线动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：