график холст Html5 заполнить на парении

Question

Я рисую график на 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] 
    ); 
} 

Пользователи могут навешивать эти прямоугольники, а затем просматривать некоторые данные. Я могу заставить их изменить цвет, но если есть много прямоугольников, сайт немного отстает, поэтому мой вопрос в том, можно ли сделать какой-то большой горизонтальный прямоугольник, который будет маскировать (белые прямоугольники) без заполнения прозрачного фона?

Answer 1

1) Вы можете определить массив как набранный массив вместо:

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

Просто убедитесь, что тип (здесь без знака 8 бит) подходит значения. Если у вас более высокие значения, чем 255, используйте 16-разрядную или 32-разрядную, если использовать float32Array с плавающей запятой и так далее.

2) Если цвет тот же, не устанавливайте стиль заливки внутри петли. fillStyle довольно дорогостоящий, поскольку он должен разбирать строку и преобразовывать ее в цвет, который он определяет.

3) использование пути для добавления прямоугольника в, определение и заполнение каждый раз медленнее, чем определять все прямоугольники, а затем заполнять все в то же время вне цикла.

4) используйте более интеллектуальный цикл, используя запись массива как условное утверждение. Мало того, что это быстрее, сам по себе, но, храня элемент массива на значение будет быстрее тоже, как JS не должен искать въездной массив каждый раз, когда вы используете обры [я]:

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 

Надеется, что это помогает !