Задать вопрос
sozercanie_kosmosa
@sozercanie_kosmosa
javascript

Заливка градиента Canvas в Chrome работает в IE 11 зависает, как победить?

В Chorme все работает, а IE 11 тормозит причем сильно.
Как победить это программно не прибегая к созданию градиента через картинку.
Только программно.

About IE:
5c041a6a56999202191585.png

вот код (ссылка на fiddle):
<html><head></head><body><script>
let sz = 80;
let cnv = createCanvasSize(sz,sz);
createGragientSL(cnv.ctx, sz, sz);
document.body.appendChild(cnv);

function createGragientSL(ctx, w, h) {
    const accur = w;
    const wCol = w / accur;

    let grd = ctx.createLinearGradient(0, 0, 0, h);

    for (let i = 0; i <= accur - 1; i++) {
        let alpha = 1 - 1 / accur * i;
        let colorA = 'rgba(255,255,255,' + alpha + ')';
        grd.addColorStop(0, colorA);
        let colorB = 'rgba(0,0,0,' + alpha + ')';
        grd.addColorStop(1, colorB);

        ctx.fillStyle = grd;
        ctx.fillRect(wCol * i, 0, (wCol), h);
    }
}

function createCanvasSize(width, height, className) {
    let node = document.createElement('canvas');
    if (className) node.classList.add(className);
    node.width = width;
    node.height = height;
    node.ctx = node.getContext('2d');
    return node;
}
</script></body></html>
  • Вопрос задан
  • 135 просмотров
Комментировать
Подписаться 1 Сложный Комментировать
Решения вопроса 1
@grinat
Делай через Uint8ClampedArray и туда вручную прописывай цвета, и прозрачность, затем его вставляй. То что ты написал будет тормозить всегда и везде:
let ctx = canvas.getContext('2d')
 let data = ctx.createImageData(screenWidth, screenHeight)
 for (var i = 0; i < data.length; i += 4) {
      data[i] =  // red
      data[i + 1] = // green
      data[i + 2] =  // blue
      data[i + 3] = // opacity
   }
   ctx.putImageData(data, 0, 0)
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Выложить 75 курсов на геткурс и настроить базовые функции
26 нояб. 2024, в 02:18
15000 руб./за проект
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Ещё заказы