createjs实现一个图形绘制音符点击播放弹奏拖动效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：createjs实现一个图形绘制音符点击播放弹奏拖动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
            height: 100%;
            background-color: #444;
        }
        h1 {
            color: #888;
            font-size: 1.1em;
            letter-spacing: 1px;
            position: absolute;
            text-align: center;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
            width: 100%;
        }

        .color {
            color: #EAEAD3;
        }
    </style>



</head>

    <body style="background-color:#333; padding:0; margin:0;">

        <h1><span class="color">Draw</span> shapes. <span class="color">Click</span> shape to play sound. <span class="color">Drag</span> Shapes to move them.</h1>

        <canvas id="canvas" width="1024" height="768" style="background-color:#333"></canvas>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/createjs-1.3.2.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/preloadjs-0.2.0.min.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easeljs-0.5.0.min.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tweenjs-0.3.0.min.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/movieclip-0.5.0.min.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/soundjs-0.3.0.min.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ColorFilter.js"></script>
        <script>
            var canvas;
            var stage;
            var lines;
            var audioshapes;
            var colors;
            var KEYCODE_LEFT = 37; //usefull keycode
            var KEYCODE_RIGHT = 39; //usefull keycode

            var curShape;
            var lfHeld = false;
            var rtHeld = false;

            var isMouseDown;
            var currentShape;
            var oldMidX, oldMidY, oldX, oldY;

            var preload;

            var isEditing = true;

            //register key functions
            document.onkeydown = handleKeyDown;
            document.onkeyup = handleKeyUp;

            //listen for window resize
            window.addEventListener('resize', resize, false);

            /* AUDIOSHAPE */
            function AudioShape(_sampleNum, _color) {
                this.initialize(_sampleNum, _color);
            }

            //Inheritance from Container
            AudioShape.prototype = new createjs.Container();
            AudioShape.prototype.Container_initialize = AudioShape.prototype.initialize;
            AudioShape.prototype.Container_tick = AudioShape.prototype._tick;

            AudioShape.prototype.initialize = function (_sampleNum, _color) {
                this.Container_initialize();
                this.alpha = 0.8;
                this.color = _color;
                this.sampleNum = _sampleNum;
                this.graphicsShape = new createjs.Shape();
                this.graphics = this.graphicsShape.graphics;
                this.addChild(this.graphicsShape);
                //listeners
                this.graphicsShape.onPress = pressHandler;
                //  this.graphicsShape.onClick = clickHandler;
            };

            function clickHandler(e) {
                if (!e.target.parent.bDragged)
                    e.target.parent.activate();

                e.target.parent.bDragged = false;

                curShape = e.target.parent;
            }

            function pressHandler(e) {

                curShape = e.target.parent;
                var offset = {
                    x: e.target.parent.x-e.stageX,
                    y: e.target.parent.y-e.stageY
                };

                e.onMouseDown = function(ev) {};

                e.onMouseMove = function(ev) {

                    if (isEditing) {
                        e.target.parent.bDragged = true;
                        e.target.parent.x = ev.stageX+offset.x;
                        e.target.parent.y = ev.stageY+offset.y;
                    }
                };
            }

            AudioShape.prototype.playSound = function() {

                var instance = createjs.SoundJS.play(this.sampleNum, createjs.SoundJS.INTERRUPT_ANY, 0, 0, false, 0.25);
                if (instance === null || instance.playState == createjs.SoundJS.PLAY_FAILED) {
                    console.log("failed sound " + this.sampleNum);
                    return;
                }

                instance.onComplete = function(instance) {};
                instance.onPlayFailed = function(instance) {};
                instance.onPlayInterrupted = function(instance) {};
            };

            AudioShape.prototype.activate = function() {
                this.playSound();

                var temp = this;
                createjs.Tween.get(temp).to({
                    alpha: 0.30
                }, 200).call(function() {
                    temp.alpha = 0.8;
                });
            };

            // INIT
            function init() {

                stage = new createjs.Stage("canvas");

                resize();

                //    createjs.Touch.enable(stage);
                //    stage.enableMouseOver();

                if (!createjs.SoundJS.checkPlugin(true)) {
                    return;
                }

                var assetsPath = "//repo.bfw.wiki/bfwrepo/sound/tune/";
                var manifest = [{
                    src: assetsPath+"hh.mp3|"+assetsPath+"hh.ogg",
                    id: 1,
                    data: 4
                },
                    {
                        src: assetsPath+"kick.mp3|"+assetsPath+"kick.ogg",
                        id: 2,
                        data: 4
                    },
                    {
                        src: assetsPath+"oh.mp3|"+assetsPath+"oh.ogg",
                        id: 3,
                        data: 4
                    },
                    {
                        src: assetsPath+"snare.mp3|"+assetsPath+"snare.ogg",
                        id: 4,
                        data: 4
                    },
                    {
                        src: assetsPath+"C2.mp3|"+assetsPath+"C2.ogg",
                        id: 5,
                        data: 4
                    },
                    {
                        src: assetsPath+"D2.mp3|"+assetsPath+"D2.ogg",
                        id: 6,
                        data: 4
                    },
                    {
                        src: assetsPath+"E2.mp3|"+a.........完整代码请登录后点击上方下载按钮下载查看