10.Рисование дуг и окружностей

сtx.arc(cx,cy,r,omega,phi,direction)-рисует дугу окружности с центром(cx,cy),радиусом r,с начальным углом omega,конечным углом phi, углы указываются в радианах. Параметр direction – булевский, если его значение true – рисование идет против часовой стрелки, если false – рисование идет по часовой стрелке. Чтобы нарисовать окружность необходимо указать начальный угол – 0, конечный – 2*Math.PI. ПРИМЕЧАНИЕ! К начальной точке дуги ведет линия от текущей точки пути!

function arc(){ ctx.beginPath(); ctx.fillStyle = "black"; ctx.arc(0,100,50,0,2*Math.PI,0); ctx.fill(); }

Функция arc() рисует окружность с центром (0,100) и радиусом 50 и закрашивает её в черный цвет.

11.Математическая рандомизация цвета

Математическая рандомизация цвета реализуется с помощью функции Math.random() – генерирующей случайное число от 0 включительно до 1.

Существует четыре способа цветовой заливки:

• текст((ctx.fillStyle ="red";))

• шестнадцатиричный код(ctx.fillStyle ="#F00";)

• rgb представление (ctx.fillStyle ='rgb(128, 0, 255)') , 128, 0, 255 – значение красной, зеленой и синей составляющих цвета.

• rgba представление (ctx.fillStyle ='rgba(128, 0, 255, 0.6)'). 128, 0, 255 – значение красной, зеленой и синей составляющих цвета, - прозрачность цвета.

Rgb – позволяет сделать только рандомизацию цвета, rgba – рандомизацию цвета и прозрачности. например.

ctx.fillStyle='rgba('+parseInt(Math.random() * (max - min) + min)+","+parseInt( (Math.random() * (max - min) + min)+","+parseInt(Math.random() * (max - min) + min)+","+parseFloat(Math.random())+")";

В данном примере в качестве стиля заливки использована математическая рандомизация цвета и прозрачности, причем цвет задается в диапазон от min до max. Использование функций мягкого преобразования типа parseInt и parseFloat обусловлено тем, что при представлении цвета как rgb/rgba, значение составляющих rgb должны быть целыми числами, значение прозрачности a – числом с плавающей точкой.

12.Использование метода clip

Метод clip() используется для рисования вырезанной области изображения. На холсте можно нарисовать произвольную не обязательно прямоугольную область изображения. Покажем использование clip() для рисования части изображения. Ограничим область рисования окружностью.

function MadeClip(){ Ctx.beginPath(); Ctx.arc(63,51,40,0,2*Math.PI,-1); Ctx.clip(); Ctx.drawImage(IMG,0,0,126,103); }

ctx.beginPath() и ctx.arc(63,51,40,0,2*Math.PI,-1) строят путь, ограничивающий область рисования. Этот путь может быть достаточно сложным, в данном случае – это просто окружность. ctx.clip() выделяет ограниченную область. Изображение рисуется с помощью метода drawImage(). IMG – это изображение, которое предварительно загружено.

13.Использование функций SetTimeOut() setInterval() clearInterval

В JavaScript есть две функции для отложенного запуска кода: setTimeout и setInterval. Отличаются они тем, что setTimeout запускает код единожды, а setInterval — постоянно с заданной периодичностью.

Синтаксис:

var timerId = setTimeout(func/code, delay)

Обе функции первым аргументом принимают строку кода, которую необходимо выполнить, или функцию, которую необходимо запустить. Второй аргумент задаёт задержку в миллисекундах. Возвращают обе функции идентификатор созданного таймера.

Первый аргумент можно указать тремя способами:

1. строкой: setTimeout('alert("прошла секунда")', 1000)

2. Вызовом функции:

function second_passed() {alert("прошла секунда")}

setTimeout(second_passed, 1000)

3. Анонимной функцией setTimeout(function() { alert('0.5 секунды') }, 500)

При указании строки кода - интерпретатор динамически создает анонимную функцию с телом из данной строки. Использовать этот метод не рекомендуется, но такая возможность сохраняется для совместимости с прежними версиями javascript. Более правильным считается третий объявление анонимной функции в явном виде, т.е третий вариант.

Действие функций setTimeout и setInterval можно отменить функциями clearTimeout и clearInterval соответственно, передавая последним идентификатор отключаемого таймера.

Простой пример: при наведении мышкой на элемент необходимо через две секунды показать сообщение. Однако если в течение этих двух секунд указатель мыши был убран с элемента, то сообщение показывать не нужно.

Простой пример? При нажатии на кнопку "Запустить таймаут", запускается таймер и по прошествии 3 секунд будет выведено сообщение, при нажатии на кнопку "Остановить отсчет" – таймер останавливается.

<input type="button" onclick="on()" value="Запустить таймаут"/>

<input type="button" onclick="off()" value="Остановить отсчет"/>

<script>

function go() { alert('Я сработало') }

function on(){timeoutId = setTimeout(go, 3000)}

function off(){clearTimeout(timeoutId)}

</script>

Использование setInterval и clearInterval аналогично.