Javascript 通过SoundCloud的波形绘制fillRect.js不工作_Javascript_Canvas_Soundcloud_Waveform

Javascript 通过SoundCloud的波形绘制fillRect.js不工作

javascript canvas

Javascript 通过SoundCloud的波形绘制fillRect.js不工作,javascript,canvas,soundcloud,waveform,Javascript,Canvas,Soundcloud,Waveform,我正在尝试使用上找到的waveform.js来绘制声音云轨迹的波形。它一直不起作用，所以我将waveform.js剥离为一个简单的表单，试图通过波形对象在新创建的画布元素中绘制fillRect。已成功创建canvas元素，但未显示fillRect。我将其与直接创建canvas元素和fillRect进行了对比，两者都可以工作以下是HTML： <!DOCTYPE html> <html> <head> <meta charset="U

我正在尝试使用上找到的waveform.js来绘制声音云轨迹的波形。它一直不起作用，所以我将waveform.js剥离为一个简单的表单，试图通过波形对象在新创建的画布元素中绘制fillRect。已成功创建canvas元素，但未显示fillRect。我将其与直接创建canvas元素和fillRect进行了对比，两者都可以工作

以下是HTML：

<!DOCTYPE html>
 <html>
   <head>
       <meta charset="UTF-8">
       <title>Sample document</title>
   </head>
   <body>
        <div id="example1"></div>
        <hr>
        <div id="example2"></div>
   </body>
       <script src="waveform.js"></script>
       <script src="script.js"></script>
 </html>

下面是waveform.js：

(function() {

    var Waveform;

    window.Waveform = Waveform = (function() {

        Waveform.name = 'Waveform';

        function Waveform(options) {
            this.container = options.container;
            this.canvas = this.createCanvas(this.container, this.container.clientWidth, this.container.clientHeight);
            this.context = this.canvas.getContext("2d");
            this.width = parseInt(this.context.canvas.width, 10);
            this.height = parseInt(this.context.canvas.height, 10);
            this.makeRect();
        };

        Waveform.prototype.createCanvas = function(container, width, height) {
          var canvas;
          canvas = document.createElement("canvas");
          canvas.setAttribute("id", "wfCanvas");
          container.appendChild(canvas);
          canvas.width = width;
          canvas.height = height;
          return canvas;
        };

        Waveform.prototype.makeRect = function() {
          var wfCanvas = document.getElementById("wfCanvas");
          var ctx = wfCanvas.getContext("2d");
          ctx.fillRect(20,20,50,100);
        }

        return Waveform;

    })();

}).call(this);

兄弟，你做得太过分了

只需确保将波形应用到的容器具有定义为css或内联的像素维度

(function() {

    var Waveform;

    window.Waveform = Waveform = (function() {

        Waveform.name = 'Waveform';

        function Waveform(options) {
            this.container = options.container;
            this.canvas = this.createCanvas(this.container, this.container.clientWidth, this.container.clientHeight);
            this.context = this.canvas.getContext("2d");
            this.width = parseInt(this.context.canvas.width, 10);
            this.height = parseInt(this.context.canvas.height, 10);
            this.makeRect();
        };

        Waveform.prototype.createCanvas = function(container, width, height) {
          var canvas;
          canvas = document.createElement("canvas");
          canvas.setAttribute("id", "wfCanvas");
          container.appendChild(canvas);
          canvas.width = width;
          canvas.height = height;
          return canvas;
        };

        Waveform.prototype.makeRect = function() {
          var wfCanvas = document.getElementById("wfCanvas");
          var ctx = wfCanvas.getContext("2d");
          ctx.fillRect(20,20,50,100);
        }

        return Waveform;

    })();

}).call(this);