JavaScript畫布繪制順序

Question

我在javascript循環中繪制帶有一些系列值的條形圖。 即使繪制序列值的代碼位於繪制條形代碼的下面，在循環的下一次迭代中，剛繪制的文本也會被覆蓋。

當出現警告框時，您可以在下面的代碼中看到這種效果。

為什么在畫布的另一部分上進行繪制操作會覆蓋以前在完全不同的位置繪制的內容？

更新：有人有用地指出使用fillRect()隱藏了此問題，但是我的問題是：為什么它首先發生？

 var exampleData = { "Series 1": 10, "Series 2": 14, "Series 3": 2, "Series 4": 12 }; var BarChart = function(options) { this.options = options; this.canvas = options.canvas; this.ctx = this.canvas.getContext("2d"); this.colors = options.colors; this.plot = function() { var maxValue = 0; for (var categ in this.options.data) { maxValue = Math.max(maxValue, this.options.data[categ]); } var noBars = Object.keys(this.options.data).length; var barWidth = (this.canvas.height) / noBars; var barIdx = 0; for (categ in this.options.data) { var barLength = Math.round(this.canvas.width * this.options.data[categ] / maxValue); this.ctx.save(); alert("plotting series line " + categ); this.ctx.fillStyle = this.colors[barIdx % this.colors.length]; this.ctx.rect(30, barIdx * barWidth, barLength, barWidth); this.ctx.fill(); alert("plotting series value " + categ); this.ctx.fillStyle = "#000000"; this.ctx.font = "24px Georgia"; this.ctx.textBaseline = "middle"; this.ctx.fillText(this.options.data[categ], 25, barIdx * barWidth + barWidth / 2); //will be covered in the loop's next iteration. Why? this.ctx.restore(); barIdx++; } } } function init() { var myCanvas = document.getElementById("myCanvas"); myCanvas.width = 800; myCanvas.height = 300; var ctx = myCanvas.getContext("2d"); var myBarChart = new BarChart({ canvas: myCanvas, seriesName: "Example Series", padding: 40, data: exampleData, colors: ["#D1E3F3", "#D1E3F3", "#D1E3F3", "#D1E3F3"] }); myBarChart.plot(); } document.addEventListener("DOMContentLoaded", init, false); 

 <canvas id="myCanvas"></canvas> 

Answer 1

變更中：

this.ctx.rect(30, barIdx * barWidth, barLength, barWidth);
this.ctx.fill();

改為使用fillRect()解決此問題：

this.ctx.fillRect(30, barIdx * barWidth, barLength, barWidth);

工作示例這里 （比原來的例子在這里 ）