Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Прозрачность
|
|
На холсте можно выводить полупрозрачные фигуры. Значение прозрачности определяется так называемым значениемglobalAppha и находится в пределах [0,0; 1,0]. При этом 1.0 – непрозрачное значение, заданное по - умолчанию.
Для установки прозрачности цвета в методах fillStyle и strokeStyle используются строки вида " rgba (r,g,b,a)", где параметр a задает значение прозрачности цвета. Иными словами, следующий код rgba (255,0,0,0.5) задаст красный цвет средней прозрачности.
Рассмотрим на примере, схожем с предыдущим. Вместо одного прямоугольника, залитого цветом очередного цвета радуги, мы будем отрисовывать по четыре прямоугольника одного цвета, но разных степеней прозрачности.
Для хранения rgb кодов цветов будем использовать хэш (см. Лекцию №12):
function createImage(){ var ctx = document.getElementById('lesson9').getContext('2d'); var clr = ["red","orange","yellow","green","lightblue","blue","violet"]; /* этот массив понадобится нам для корректности ссылок на элементы хэша */ var colors = {}; /* объявляем хэш, в котором будем хранить rgb значение цветов*/ colors["red"] = [255,0,0]; /* rgb код красного цвета и т.д.*/ colors["orange"] = [255,165,0]; colors["yellow"] = [255,255,0]; colors["green"] = [0,255,0]; colors["lightblue"] = [173,216,230]; colors["blue"] = [0,0,255]; colors["violet"] = [238,130,238]; var x=0; /*вспомогательная переменная, для задания координаты по - горизонтали очередного залитого цветом прямоугольника*/ for (i=0; i<7; i++) /* цикл для обращения к элементам хэша, хранящим массив rgb кода */ { for(j=1; j<5; j++) { ctx.fillStyle="rgba("+colors[clr[i]][0]+","+colors[clr[i]][1]+", "+colors[clr[i]][2]+ ","+(j*0.2)+")"; /*задание параемтров цвета заливки*/ ctx.fillRect(x,20,20,100); /*отрисовка прямоугольника*/ x=x+20; // приращение переменной координаты по - горизонтали, для того, чтобы следующий прямоугольник нe накладывался на предыдущий */ } }}Date: 2015-07-22; view: 416; Нарушение авторских прав