Question

我正在尝试使用一些html 5画布，并且在某个时刻我尝试用新的条形图（矩形）更新画布。

现在是棘手的部分。

假设您有一个包含1800个项目的数组（由php请求生成的数字）。你还有一个宽度为1163px的html 5画布。

现在您需要在画布中绘制条形（矩形），但条形图需要保持2px宽，并且所有条形之间必须有1px的边距。

因此，PHP文件始终返回1800个数字（图像中的颜色代码），您需要提取足够的数字以适合画布宽度（包含边距（条形+边距））。

您提取的新数字数组不仅仅是前100-200个数字！它必须包含（第一个或第二个）和（最后一个或最后一个）数字。

到目前为止我尝试了什么

<script>

// 1800 numbers !!! ......... //
arr = [12,1,21,1,2,13,21,32,1,5,4,6,5,4,6,4,8,3,5,4,9,6,8,7,9,1,3,6,4,6,4,5,9,87,4,4,5];

c = getElementById('canvas');
ctx = c.getContex('2d');

var can = 360;

var spliter = 2;

var canWidth = c.width;
var numOfBars = arr.length;
var barwidth = 2;
var margin = 1;

// amount of bars that will fit in the canvas //
var maxbars  = (canWidth / (barwidth + margin));

var offset = arr.length / maxbars;

for(var i = 0; i < arr.length; i++) {
    if(arr[i] % offset){
        ctx.fillStyle = "#000000";
        ctx.fillRect(
            this.margin + i * this.barwidth / numOfBars,
            0,
            barwidth + margin,
            100
          );
    }
}

</script>

这似乎不适用于我需要它如何工作。

提前致谢。

Answer 1

Maxbars必须是整数吗？和偏移相同。之后，这是你的步骤。

var maxbars  = Math.floor(canWidth / (barwidth + margin));
var offset = Math.floor(arr.length / maxbars);

for(var i = 0; i < arr.length; i+=offset) {
        var colorcode = arr[i];
        // fill stuff
}

Javascript将数组存储在动态内容之外，并在需要时重用

1 个答案: