jscanvas (811582)
Текст из файла
Рисование прямоугольника:oЗалитый цветом прямоугольник:fillRect(x, y, width, height)oПрямоугольный контур:strokeRect(x, y, width, height)oОчистка прямоугольной области (прозрачный прямоугольник):clearRect(x, y, width, height)Для выбора цвета заливки используется метод:oВ системе RGB без указания уровня прозрачности:fillStyle = ‘rgb(0-255, 0-255, 0-255)’;oВ системе RGB с указанием уровня прозрачности:fillStyle = ‘rgba(0-255, 0-255, 0-255, 0.1-0.9)’;oВ качестве заливки по умолчанию стоит черный цвет.2. Выбор метода построения пути (кривая, прямая, кривая безье) или переход в новую точку:oпереход в новую точку с указанными координатами:CanvasRenderingContext2D.moveTo()void ctx.moveTo(x, y);oсоединение прямой линией последней использованной координатой с точкой x, y:CanvasRenderingContext2D.lineTo()void ctx.lineTo(x, y);oдобавление кубической кривой безье (требуется три точки: первые две (cp1x, cp1y, cp2x,cp2y) — контрольные, последняя — конец линии; начальной точкой является последняяуказанная точка, или точка, к которой перешли командой moveTo())CanvasRenderingContext2D.bezierCurveTo()void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);oдобавление квадратичной кривой безье (cpx — координата х контрольной точки, cpy —координата y контрольной точки):CanvasRenderingContext2D.quadraticCurveTo()void ctx.quadraticCurveTo(cpx, cpy, x, y);oдобавление дуги с центром в точке x и y и радиусом r с позиции startAngle до endAngle (поумолчанию движение дуги по часовой стрелке)CanvasRenderingContext2D.arc()void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);oдобавление дуги, соединенной с предыдущей точкой прямой линией:CanvasRenderingContext2D.arcTo()void ctx.arcTo(x1, y1, x2, y2, radius);oдобавление эллипса к пути с центром в точке x и y и радиусом radiusX и radiusY с началомв startAngle и окончанием в endAngle:CanvasRenderingContext2D.ellipse()void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle,anticlockwise);oсоздание прямоугольного пути:CanvasRenderingContext2D.rect()void ctx.rect(x, y, width, height);o3.
Конец пути — соединением прямой линией предпоследней точки с начальной точкой путиclosePath()void ctx.closePath();Код для создания объекта canvas:<!DOCTYPE html><html><head><title>Canvas</title><script type="text/javascript">function draw() {var canvas = document.getElementById('canvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');}}</script><style type="text/css">canvas { border: 1px solid black; }</style></head><body onload="draw();"><canvas id="canvas" width="150" height="150"></canvas></body></html>Задание 1: Нарисовать треугольник красного цвета с гранями разного цветаРешение:var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.fillStyle = 'rgb(255, 0, 0)';ctx.beginPath(); // начало рисованияctx.moveTo(20, 20); // движение к точке 20,20ctx.strokeStyle = 'blue';ctx.lineTo(200, 20); // из точки 20, 20 рисование линии к точке200,20ctx.strokeStyle = 'green';ctx.lineTo(120, 120); // из точки 200, 20 рисование линии к точке120,120ctx.closePath(); // рисование последней линии треугольникаctx.stroke(); // отрисовкаctx.fill(); // заливкаЗадание 2:Нарисовать вертикальный ряд окружностей радиусом 10 на расстоянии 100 от верхнего краяэкрана и с такими горизонтальными координатами 50, 80, 110, 140, … , 290.* раскрасить кругиЗадание 3:«Круги на воде».Нарисуйте пару десятков концентрических окружностей, то есть окружностей разного радиуса,но имеющих общий центр..
Характеристики
Тип файла PDF
PDF-формат наиболее широко используется для просмотра любого типа файлов на любом устройстве. В него можно сохранить документ, таблицы, презентацию, текст, чертежи, вычисления, графики и всё остальное, что можно показать на экране любого устройства. Именно его лучше всего использовать для печати.
Например, если Вам нужно распечатать чертёж из автокада, Вы сохраните чертёж на флешку, но будет ли автокад в пункте печати? А если будет, то нужная версия с нужными библиотеками? Именно для этого и нужен формат PDF - в нём точно будет показано верно вне зависимости от того, в какой программе создали PDF-файл и есть ли нужная программа для его просмотра.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
