Question

我正在使用PNG作为HTML5 Canvas中一系列矩形的背景图案，这些矩形充当音频可视化工具，但是，我收到了带有我的代码的Uncaught TypeError：

HTML：

<canvas id="analyser_render"></canvas>

JS：

canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);
pattern = ctx.createPattern("images/analyser.png", "repeat-x");
ctx.fillStyle = pattern;

bars = 30;
for (var i = 0; i < bars; i++) {
     bar_x = i * 10;
     bar_width = 9;
     bar_height = -(dataArray[i] / 2);
     ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}

这只是我实际代码的一部分，包括创建矩形的部分。 dataArray变量是Web Audio API的一部分，并不是相关问题的一部分。

Answer 1

要正确加载图像，您需要创建一个图像对象，然后设置其来源。

img = new Image();
img.src = 'images/analyser.png';

然后在createPattern中调用图像对象

pattern = ctx.createPattern(img, "repeat-x");

无法在'CanvasRenderingContext2D'上执行'createPattern'

1 个答案: