sozercanie_kosmosa
@sozercanie_kosmosa

Заливка градиента 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>
  • Вопрос задан
  • 55 просмотров
Решения вопроса 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)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Digital Sharks Казань
от 60 000 до 65 000 руб.
Ingram Micro Cloud Москва
от 170 000 руб.
CODEFATHER Москва
от 70 000 до 150 000 руб.