КАТЕГОРИИ: Архитектура-(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; Просмотров: 285; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |