0
http://www.waveformjs.org에있는 waveform.js를 사용하여 SoundCloud 트랙의 파형을 그리려고합니다. 아직 작동하지 않아 waveform.js를 Wave 객체를 통해 새로 만든 캔버스 요소에 채우기를 시도하는 베어 본 (bare bone) 양식으로 제거했습니다. canvas 요소가 성공적으로 작성되었지만 fillRect가 나타나지 않습니다. 필자는 이것을 캔버스 요소와 fillRect의 직접 생성과 대조했습니다. 둘 다 작동합니다.SoundCloud의 waveform.js가 작동하지 않음으로 fillRect 그리기
다음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);