Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Arc(x, y, radius, startAngle, endAngle, anticlockwise)⇐ ПредыдущаяСтр 14 из 14
x и y – координаты, в которых начинается арка; radius – радиус окружности, по которой создается арка; startAngle, endAngle – начальный и конечный угол, которые усекают окружность до арки. В качестве единицы измерения углов применяются радианы. Например, полная окружность – это 2п радиан. Если нам надо нарисовать полный круг, то параметр endAngle имеет значение 2п. В JavaScript эту величину можно получить с помощью выражения Math. PI *2. anticlockwise – направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом. При значении true – направление против часовой стрелки, а при значении false – по часовой стрелке. Метод arkTo () также рисует дугу. Определение: ArkTo(x1, y1, x2, y2, radius), где х1 и y1 – координаты первой контрольной точки, х2 и y2 – координаты второй контрольной точки, radius – радиус дуги. Метод quadraticCurveTo () создает квадратичную кривую. Имеет следующее определение: QuadraticCurveTo(x1, y1, x2, y2), где х1 и y1 – координаты первой опорной точки, х2 и y2 – координаты второй опорной точки. Метод bezierCurveTo () – рисует кривую Безье. Определение: где х1 и y1 – координаты первой опорной точки, х2 и y2 – координаты второй опорной точки, х3 и y3 - координаты третьей опорной точки. Изображения на canvas Метод drawImage () – позволяет отдельно выводить изображения на canvas. Определение: Context.drawImage(image, x, y), где image передает выводимое изображение, x и y – координаты верхнего левого угла изображения. <script> var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d");
var img = new Image(); img.src = "dubi.png"; img.onload = function() {
context.drawImage(img, 0, 0); }; </script> Другая версия метода позволяет дополнительно задать ширину и высоту выводимого изображения: context.drawImage(img, 20, 40, 110, 90); Добавление теней Элемент canvas поддерживает добавление теней к нарисованным объектам. Для создания теней применяются следующие свойства: shadowOffsetX – горизонтальное смещение в пикселях справа (или слева при отрицательном значении); shadowOffsetY – вертикальное смещение; shadowBlur – число пикселей для установки размытия тени; shadowColor – цвет тени. Трансформации Элемент canvas поддерживает трансформацию. Перемещение осуществляется методом translate (): Translate (x, y), где параметр указывает на смещение по осям.
Для поворота фигур применяется метод rotate (): Rotate (angle), где в качестве параметра передается угол поворота в радианах относительно точки с координатами (0,0) Для масштабирования фигур применяется метод scale (): Scale(xScale, yScale), параметр xScale указывает на масштабирование по оси х, а параметр yScale – по оси y. Рисование мышью В canvas можно создавать фигуры динамически, рисуя указателем мыши. Для обработки движения мыши определяются три обработчика – нажатие мыши, перемещение и отпускание мыши. При нажатии мыши устанавливаем переменную draw равным true, т.е. идет рисование. Также при нажатии мы фиксируем точку, с которой будет идти рисование. При перемещении мыши получаем точку, на которую переместился указатель, и рисуем линию. При отпускании указателя закрываем графический путь методом context.closePath() и сбрасываем переменную draw в false. <script> var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"), w = canvas.width, h=canvas.height;
var mouse = { x:0, y:0}; var draw = false;
canvas.addEventListener("mousedown", function(e){
mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; draw = true; context.beginPath(); context.moveTo(mouse.x, mouse.y); }); canvas.addEventListener("mousemove", function(e){
if(draw==true){
mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; context.lineTo(mouse.x, mouse.y); context.stroke(); } }); canvas.addEventListener("mouseup", function(e){
mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; context.lineTo(mouse.x, mouse.y); context.stroke(); context.closePath(); draw = false; }); </script>
|
|||||
Последнее изменение этой страницы: 2021-04-05; просмотров: 48; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.189.170.206 (0.006 с.) |