Используем Canvas в качестве фона и с оглядкой на будущее

в 12:43, , рубрики: canvas, css, javascript, w3c, метки: , ,

HTML5 Canvas — элемент созданный для создания динамической графики на WebGL или обычном 2D контексте. Однако Canvas можно (и можно будет) использовать в браузерах в качестве фона CSS. Это мы рассмотрим в этой статье.

Эта небольшая статья делалась с упором на кроссбраузерность и стандарт W3C (CSS4 Images). На сегодняшний момент это можно использовать в браузерах: Mozilla Firefox, Safari, Google Chrome и прочих браузерах, поддерживающие -webkit-canvas, element или -moz-element в фонах CSS.

Эта идея нигде не была своровона — она тщательно продумана мной. Является дополнением к уже существующим темам о CSS, однако она касается и темы JavaScript в частности.

Дополнительно

Канвас ведет себя как обычное CSS изображение, однако оно может меняться в зависимости от рендеринга самого Canvas. Вы можете (почти) без проблем его использовать вместе с другими фоновыми изображениями. Однако об этом «почти» я говорить не буду. Вы должны сами догадаться, о чем может идти речь (а речь идет об использовании одной и той же записи фона но с разными значениями). Кроме того, рендеринг этих фонов также аппаратно ускоряем (однако тест на производительность не проводил).

Основная тема

В CSS, функции element(#name), -moz-element(#name) и -webkit-canvas применяется в фонах. Общий CSS пример дан ниже.

Для Webkit можно использовать -webkit-canvas(name) с JS функцией.

document.getCSSCanvasContext(ctxName, cssName, width, height)

А для Firefox можно использовать -moz-element с функцией

document.mozSetImageElement(id, element);

Однако для кроссбраузерности хватило бы такого кода, который работает и со стандартным CSS element(#name). Это делается для получения общего Canvas контекста для соответствующих им CSS фонов.

function getCSSCanvasContext(name, css, width, height){
  if(document.getCSSCanvasContext){
    return document.getCSSCanvasContext(name,css,width,height);
  } else {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.id = css;
    canvas.style.display = "none";
    document.body.appendChild(canvas);
    return canvas.getContext(name);
  }
}

Браузерам, которые поддерживают свойство element() этот метод также подойдет.

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

background-image: -webkit-canvas(canvas);
background-image: -moz-element(#canvas);
background-image: element(#canvas);

При этом можно использовать getCSSCanvasContext("2d","canvas",320,240) и это будет работать практически везде. Браузеры, которые не поддерживают CSS element(), могут использовать заглушку в виде CSS url().

Еще можно использовать JS библиотеку под названием -prefix-free.

background-image: canvas(canvas);
background-image: element(#canvas);

Код стал значительно меньше, но мы не избавились от нужды использовать свойство canvas().
Кроме того, для избежания конфликтов с ID элементов, можно усложнить функцию getCSSCanvasContext:

function getCSSCanvasContext(name, css, width, height, id){
  if(document.getCSSCanvasContext){
    return document.getCSSCanvasContext(name,css,width,height);
  } else {
    var css = id || css;
    var extend = document.getElementById(css);
    var canvas = extend && extend.tagName == "CANVAS" || document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.id = css;
    canvas.style.display = "none";
    document.body.appendChild(canvas);
    return canvas.getContext(name);
  }
}

Теперь он может проверить наличие существующего Canvas и использовать другой индификатор для CSS element(#name), отличный от CSS canvas(name), по желанию. Это значительно экономит ресурсы.

К сожалению способ проверки поддержки понятия element() я не придумал. Я не имею своего сайта или блога. Все ответы прошу писать мне лично (alexei03a@gmail.com) или звонить по скайпу (solovei905).

Если вы нашли ошибку в коде, или у вас есть предложение по этой теме, можете написать мне…

Автор: Alexei03a

Поделиться

* - обязательные к заполнению поля