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

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

代码语言：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, .........完整代码请登录后点击上方下载按钮下载查看