Question

我正在尝试使用http://www.waveformjs.org上的waveform.js来绘制SoundCloud轨道的波形。它没有工作，所以我将波形.js剥离成一个裸骨形式，试图通过Waveform对象在新创建的canvas元素中绘制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>

这是script.js：

var canvas, container;

// Creating canvas element and rect in example1
canvas = document.createElement("canvas");
canvas.setAttribute("id", "canvas");
container = document.getElementById("example1");
container.appendChild(canvas);
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,50,100);
// Both created successfully

// Creating canvas element and rect in example2, through waveform object
var waveform = new Waveform({
    container: document.getElementById("example2")
});
// Canvas element created successfully, no rectangle

这是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);

Answer 1

你知道吗，你已经过去了。

确保要应用波形的容器将PIXEL DIMENSIONS定义为css或inline。

通过SoundCloud的波形绘制fillRect.js不起作用

1 个答案: