HTML5画布图表填补悬停

我画的曲线图上的HTML 5画布标签从与数字的阵列等HTML5画布图表填补悬停

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

用户可以悬停这些矩形，然后看到更多的数据。我可以让他们改变颜色，但如果有很多矩形网站滞后一点，所以我的问题是，如果有可能做一些大的水平矩形，将屏蔽（白色矩形）而不填充透明背景？

来源

2014-11-17 Zenel Shabani

首先尝试从循环中移动填充样式定义 - 这会给你一个小小的改进:)，并为面具尝试阅读关于[clip]（https://developer.mozilla.org/samples/canvas-教程/ 6_2_canvas_clipping.html） –

1）您可以定义数组作为一个类型数组来代替：

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

只要确保类型（此处无符号的8位）适合的值。如果您的值高于255，则使用16位或32位（如果浮点使用Float32Array等）。

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

3）使用路径将矩形添加到，定义和填充每个时间比定义所有rects慢，然后在循环外同时填充所有。

4）通过使用数组条目作为条件语句，还可以使用更智能的for-loop。不仅是本身这个速度较快，但通过存储阵列项的值会更快也为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

希望这有助于！

来源

2014-11-17 00:51:11 K3N

HTML5画布图表填补悬停

回答

相关问题