javascript - Html5 Canvas 图形在悬停时填充

Question

我正在从数组中的 html 5 canvas 标签上绘制一个图表，其中的数字类似于

arr = [6,3,16,6,53,1,3,54,67,6,3,21,6,49,7,8,31,66,51,32,56,49,4,78,9,65,43,1,3,54,67,6,3];

这些数字将是在 Canvas 上绘制的矩形的高度，并将用透明背景填充白色；

for (var i = 0; i < arr.length; i += 1) {
ctx.fillStyle = "#ffffff";
   // Fill rectangle with gradient
    ctx.fillRect(
        arr[i] * 10,
        c_height - arr[i],
        8,
        arr[i]
    );
}

用户可以将鼠标悬停在这些矩形上，然后查看更多数据。 我可以让它们改变颜色，但如果有很多矩形，网站会有点滞后，所以我的问题是是否可以制作某种大的水平矩形来遮盖(白色矩形)而不填充透明背景？

Answer 1

1) 您可以将数组定义为类型化数组:

var arr = new Uint8Array([6,3,16,6,53,1,3,...,3]);

只需确保类型(此处为无符号 8 位)适合值即可。如果您的值高于 255，则使用 16 位或 32 位，如果浮点则使用 Float32Array 等等。

2) 如果颜色相同，请勿在循环内设置填充样式。 fillStyle 相当昂贵，因为它必须解析字符串并将其转换为它定义的颜色。

3)使用路径添加矩形，每次定义和填充比定义所有矩形然后在循环外同时填充所有慢。

4) 通过使用数组条目作为条件语句来使用更智能的 for 循环。这不仅本身更快，而且通过将数组条目存储到一个值也会更快，因为 JS 不必在每次使用 arr[i] 时查找数组条目:

ctx.fillStyle = "#ffffff";                // set fill style outside loop
ctx.beginPath();                          // make sure we use a clean path

for (var i = 0, a; a = arr[i]; i++) {     // fetch item and use as cond. for loop
    ctx.rect(a * 10, c_height - a, 8, a); // add rect to path, but not fill yet
}

ctx.fill();                               // fill all rects with fillstyle

希望这有帮助!