Всего за 5.99 руб. Купить полную версию
В точках разворота мяч должен немного сжиматься по вертикали.
2). По клику на мяч в точке экрана, на которой был совершен клик появляется текст, например, «Гол!», который уходит вправо, постепенно исчезая.
Элемент разметки для текста создается по клику, смещается вправо с изменением прозрачности и удаляется по достижении правого края экрана
3 canvas: рисование на холсте
Canvas это HTML элемент, предназначенный для создания растровых изображений посредством javascript.
Важно отметить, что сам элемент canvas явлется частью DOM-модели документа, но все, что на нем изображается (фигуры, надписи) остается внутри него и в DOM не встраивается.
3.1 Нанесение изображений при помощи родного API
Canvas вставляется в разметку как и любой другой тег HTML. Работа с его содержимым осуществляется при помощи javascript.
Например:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
</head>
<body>
<canvas id=«myCanvas» width=600px height=600px> </canvas>
<script>
var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);
//Заливка
context.fillStyle = «#5F5»;
context.fillRect (10,10, 300, 300);
//надпись
context.font = «50px serif»
context.fillStyle = «#FF0000»;
context.fillText («Hello People!», 30, 90);
//фиолетовый прямоугольник
context.fillStyle = «violet»;
context.fillRect (25,25,150,150);
context.strokeStyle = «gray»; // цвет линии
context.lineWidth = 6; // толщина линии
context.strokeRect (150,150,150,150); // прямоугольник
context.clearRect (100,100,150,150); // очищаем прямоугольную область
</script>
</body>
</html>
Пример градиентной заливки
<script>
$ (function () {
var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);
//Линейный градиент
context.fillStyle = «#000000»;
var gradient = context.createLinearGradient (5,45,150,150);
gradient.addColorStop (0.0,«#00FF00»);
gradient.addColorStop (0.471428571, «#FF0000»);
gradient.addColorStop (1.0,«#0000FF»);
context.fillStyle = gradient;
context.fillRect (25,25,150,150);
//Радиальный градиент
var rad_grad = context.createRadialGradient (250,250,1, 150,250,120);
rad_grad.addColorStop (0,«#F00»);
rad_grad.addColorStop (0.5,«#0F0»);
rad_grad.addColorStop (1,«#00F»);
context.fillStyle = rad_grad;
context.fillRect (150,150,200,200);
});
</script>
Пример отрисовки фигуры «звезда»
//star
context.strokeStyle = «red»;
context.lineWidth = 10;
context.beginPath ();
context.moveTo (50,100);
context.lineTo (240,100);
context.lineTo (70,230);
context.lineTo (140,30);
context.lineTo (220,230);
context.closePath ();
context.stroke ();
Пример рисования кривой Безье
context.strokeStyle = «red»;
context.lineWidth = 7;
context.beginPath ();
context.moveTo (300, 400);
context. quadraticCurveTo (400, 500, 450,300);
//context.closePath ();
context.stroke ();
На «холст» можно загружать и уже имеющиеся растровые изображения из файлов. Для этого существует функция drawImage (). Ниже пример ее использования.
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.