Лабораторные работы МИРЭА JavaScript (1017114), страница 12
Текст из файла (страница 12)
context.strokeStyle = "black";
context.stroke();//метод stroke делает нарисованные контуры видимыми.
Что значит
arc(x, y, radius, startAngle, endAngle, counterClockwise); ?
Посмотрите на схему, дуга - это часть окружности воображаемого круга, этот воображаемый круг можно определить координатами x,y и радиусом.
Далее мы можем определить саму дугу, для этого нужно выбрать 2 точки по диаметру этой мнимой окружности, и углы от центральной точки до вашей точки будут начальмым и конечным углами. Углы задаются в радианах.
И последним аргументом мы передаем направление рисования, по умолчанию это false, что означает что рисоваться будет по часовой стрелке (необязательный параметр).
С помощью метода arc() можно нарисовать полную окружность
<html>
<body>
<canvas id='draw' style='border:1px solid' width='200' height='200'></canvas>
<script type='text/javascript'>
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath();
x.arc(30,30,20,x1,x2);
x.moveTo(100,100);
x.rect(70,50,70,70);
x.fill();
</script>
</body>
</html>
Для раскрашивания нарисованных в canvas фигур предусмотрены свойства: fillStyle и strokeStyle. Свойство fillStyle используется для применения цвета к закрашенным, а strokeStyle для применения цвета к не закрашенным фигурам.
<html>
<body>
<canvas id='draw' width='300' height='200' style='border:1px solid'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillStyle="green";
x.fillRect(10,40,65,65);
x.strokeStyle="#FF45FF";
x.strokeRect(100,40,65,65);
x.fillStyle="rgb(255,73,73)";
x.fillRect(190,40,65,65);
</script>
</body>
</html>
Как видно из предыдущего примера цвета могут задаются так же как для шрифта.
В canvas цвет может задавать с помощью rgba (задается цвет и прозрачность элемента).
<html>
<body>
<canvas id='draw' width='270' height='150' style='border:1px solid;'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillStyle="rgba(0,0,0,0.5)";
x.fillRect(10,40,65,65);
x.fillStyle="rgba(0,0,0,0.1)";
x.fillRect(100,40,65,65);
x.fillStyle="rgba(0,0,0,1)";
x.fillRect(190,40,65,65);
</script>
</body>
</html>
Здесь используются две знакомые нам функции: fillStyle - задает цвет и прозрачность кисти рисования и fillRect - рисует прямоугольник с заданными координатами и размерами.
Линии
Перемещение пера в точку с координатами x,y без прорисовки линии выполняется методом moveTo(x, y).
Перемещение пера в точку с координатами x,y с прорисовкой линии выполняется методом lineTo(x, y).
В HTML имеются несколько свойств для оформления линий нарисованных с помощью метода lineTo(), это lineWidth, lineCap, lineJoin.
С помощью свойства lineWidth можно установить ширину линии (по умолчанию линии имеют ширину 1 пиксель)
<html>
<body>
<canvas id='draw' width='260' height='120' style='border:1px solid; padding:10px;'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
//Рисуем линию толщиной 3 пикселя
x.beginPath();
x.moveTo(10,10);
x.lineWidth=3;
x.lineTo(200,10);
x.stroke();
//Рисуем линию толщиной 10 пикселей
x.beginPath();
x.moveTo(10,40);
x.lineWidth=10;
x.lineTo(200,40);
x.stroke();
//Рисуем линию толщиной 1 пиксель
x.beginPath();
x.moveTo(10,70);
x.lineWidth=1;
x.lineTo(200,70);
x.stroke();
//Рисуем линию толщиной 6 пикселей
x.beginPath();
x.moveTo(10,100);
x.lineWidth=6;
x.lineTo(200,100);
x.stroke();
</script>
</body>
</html>
С помощью свойства lineCap можно оформлять кончики линии
<html>
<body>
<canvas id='draw' width='230' height='90' style='border:1px solid;padding:20px'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
//Нарисуем линию с закругленным кончиком
x.beginPath()
x.moveTo(10,10);
x.lineWidth=10;
x.lineCap='round';
x.lineTo(200,10);
x.stroke();
//Нарисуем линию с квадратным кончиком
x.beginPath();
x.moveTo(10,40);
x.lineWidth=10;
x.lineCap='square';
x.lineTo(200,40);
x.stroke();
//Нарисуем линию со стандартным кончиком
x.beginPath();
x.moveTo(10,70);
x.lineWidth=10;
x.lineCap='butt';
x.lineTo(200,70);
x.stroke();
</script>
</body>
</html>
С помощью свойства lineJoin можно сглаживать стыки двух линий.
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;padding:20px;'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
//Сгладим стыки линий
x.beginPath()
x.moveTo(10,10);
x.lineWidth=15;
x.lineJoin='round';
x.lineTo(50,50);
x.lineTo(100,10);
x.lineTo(170,80);
x.lineTo(210,40);
x.stroke();
//Нарисуем стыки не сглаженными (значение по умолчанию)
x.beginPath()
x.moveTo(10,100);
x.lineWidth=15;
x.lineJoin='miter';
x.lineTo(50,140);
x.lineTo(100,100);
x.lineTo(170,170);
x.lineTo(210,130);
x.stroke();
</script>
</body>
</html>
Градиентная заливка
С помощью метода createLinearGradient(x1,y1,x2,y2) можно создать линейный градиент. Параметры x1 и y1 устанавливают координаты начальной, а x2 и y2 конечной точки градиента.
После того, как градиент создан необходимо указать цвета перехода. Это можно сделать с помощью метода addColorStop(точка,цвет).
Например, если нужно создать градиент, который плавно изменяет цвет с черного на белый необходимо установить черный цвет в точке 0 (так условно начальная точка градиента) и белый цвет в точке 1 (конечная точка градиента).
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;'></canvas>
<script>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
/* Создаем градиент */
var grad = x.createLinearGradient(0,0,0,150);//начало и конец
/* Добавляем точки цветового перехода */
grad.addColorStop(0.0,'black');
grad.addColorStop(1.0,'white');
/* Устанавливаем получившийся градиент как свойство заливки */
x.fillStyle=grad;
/* Рисуем фигиру, к которой будет применен созданный градиент */
x.fillRect(20,20,200,200);
</script>
</body>
</html>
Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;'></canvas>
<script>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
/* Создаем градиент */
var grad = x.createLinearGradient(50,50,150,150);
/* Добавляем точки цветового перехода */
grad.addColorStop(0.0,'#d2006b');//Розовый цвет в начале
grad.addColorStop(0.5,'#00a779');//Бирюзовый цвет в середине
grad.addColorStop(1.0,'#ffe800');//Желтый цвет в конце
/* Устанавливаем получившийся градиент как свойство заливки */
x.fillStyle=grad;
/* Рисуем фигиру, к которой будет применен созданный градиент */
x.fillRect(20,20,190,150);
</script>
</body>
</html>
Создание теней
| Метод | Описание |
| shadowOffsetX | Смещение тени от объекта по горизонтали (может принимать отрицательные значения). |
| shadowOffsetY | Смещение тени от объекта по вертикали (может принимать отрицательные значения). |
| shadowBlur | Величина размытия тени. |
| shadowColor | Цвет тени (по умолчанию черный). |
<html>
<body>
<canvas id='draw' width='300' height='200' style='border:1px solid'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.shadowOffsetX=3;
x.shadowOffsetY=3;
x.shadowBlur=8;
x.shadowColor='black';
x.fillStyle='#ffaa00';
x.fillRect(50,40,55,55);
</script>
</body>
</html>
Текст
Метод fillText("текст",x,y) позволяет отображать в элементе canvas произвольный текст.
<html>
<body>
<canvas id='draw' width='240' height='180' style='border:1px solid;'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillText("Теперь можно отображать", 15, 40);
x.fillText("произвольный текст", 100, 70);
x.fillText("в элементе canvas.", 60, 120);
</script>
</body>
</html>
Текст отображаемый в canvas может быть оформлен с помощью свойства font.
<html>
<body>
<canvas id="draw" width="300" height="160" style="border:1px solid;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.font='15px Verdana';
x.fillStyle='#60016d';
x.fillText("Теперь можно отображать", 10, 40);
x.font='25px Arial';
x.fillStyle='#007439';
x.fillText("произвольный текст", 10, 80);
x.fillStyle='#a67800';
x.font='20px Comic Sans MS';
x.fillText("в элементе canvas.", 50, 120);
</script>
</body>
</html>
Примеры
Дорожный знак
<html>
<body>
<canvas id="myCanvas" width="200" height="200" />
<script type='text/javascript'>
var ctx = document.getElementById("myCanvas").getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
// Радиус и центр круга
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
