Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Параметры




Синтаксис

Метод translate

Пример

Параметры

Синтаксис

Метод transform

Пример

Синтаксис

Метод toDataURL

Пример

Параметры

Синтаксис

Метод strokeText

Пример

Параметры

Синтаксис

Метод strokeRect

Пример

Синтаксис

Метод stroke

Пример

Синтаксис

setTransform(a,b,c,d,e,f)

Javascript

var rectWidth = 150;

var rectHeight = 75;

 

// перемещаем контекст к центру холста

ctx.translate(canvas.width / 2, canvas.height / 2);

 

ctx.fillStyle = "blue";

ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);

 

// сбрасываем матрицу трансформаций

// 1 0 0

// 0 1 0

// 0 0 1

 

// применяем новую трансформацию

ctx.setTransform(1, 0, 0, 1, 0, 0);

 

ctx.fillStyle = "red";

ctx.fillRect(0, 0, rectWidth, rectHeight);

 

 

Делает нарисованные контуры видимыми.

stroke()

Javascript

ctx.moveTo(50,50);

ctx.lineTo(50,100);

ctx.lineTo(100,100);

ctx.stroke();

 

 

Рисует контур прямоугольника цветом, определенный свойством strokeStyle.

strokeRect(x,y,width,height)

·x и y — координаты левого верхнего угла прямоугольника;

·width — ширина прямоугольника;

·height — высота прямоугольника.

Все параметры обязательны, должны быть положительными числами.

Javascript

ctx.fillRect(50,50,100,50);

ctx.strokeRect(120,100,100,50);

ctx.clearRect(100,70,50,50);

 

 

Рисуем контур текста цветом, определенным strokeStyle.

strokeText(text, x, y [, maxWidth ])

·text — текст, который будем рисовать;

·x,y — координаты верхнего левого угла текста;

·maxWidth — не обязательный параметр, если он указан и текст при необходимости будет отмасштабирован чтобы влезть в указанную ширину.

Javascript

var canvas = document.getElementById("picture");

var ctx = canvas.getContext("2d");

 

ctx.font = "normal normal 32px Tahoma";

ctx.strokeStyle = "red";

ctx.strokoText("Учим canvas", 300, 200);

 

 

Сохраняет в data url изображение нарисованное на холсте.

canvas.toDataURL()

Результатом будет url PNG изображения закодированного в data url.

Javascript

var canvas = document.getElementById("picture");

var ctx = canvas.getContext("2d");

ctx.fillRect(10,10,20,20);

ctx.fillStyle = "green";

ctx.fillRect(40,40,20,20);

 

var scrImg = canvas.toDataURL();

alert(scrImg);

 

 

Применяет нестандартную матрицу преобразования.

transform(a,b,c,d,e,f)

 

Javascript

var sin = Math.sin(Math.PI/6);

var cos = Math.cos(Math.PI/6);

ctx.translate(200, 200);

var c = 0;

for (var i=0; i <= 12; i++) {

c = Math.floor(255 / 12 * i);

ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";

ctx.fillRect(0, 0, 100, 10);

ctx.transform(cos, sin, -sin, cos, 0, 0);

}

 

ctx.setTransform(-1, 0, 0, 1, 200, 200);

ctx.fillStyle = "rgba(255, 128, 255, 0.5)";

ctx.fillRect(0, 50, 100, 100);

 

 

Перемещает канву и начало координат в новое место.

translate(x, y)

·x — расстояние, на которое переносим полотно по оси X;

·y — расстояние, на которое переносим полотно по оси Y.




Поделиться с друзьями:


Дата добавления: 2015-06-27; Просмотров: 255; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.013 сек.