Html5画布图形填充悬停答案

【问题标题】：Html5 canvas graph fill on hoverHtml5画布图形填充悬停
【发布时间】：2014-11-17 09:02:40
【问题描述】：

我正在从数组中的 html 5 画布标签上绘制一个图形，其中包含类似

的数字

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];

这些数字将是在画布上绘制的矩形的高度，并将填充为白色并带有透明背景；

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]
    );
}

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

【问题讨论】：

首先尝试从循环中移动填充样式定义 - 这会给你一个小的改进:) 并且对于面具尝试阅读clip

标签： javascript html canvas

【解决方案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

希望这会有所帮助！

【讨论】：