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
