jscanvas (JavaScript Canvas)
Описание файла
PDF-файл из архива "JavaScript Canvas", который расположен в категории "". Всё это находится в предмете "проблемно-ориентированные языки" из 1 семестр, которые можно найти в файловом архиве МПУ. Не смотря на прямую связь этого архива с МПУ, его также можно найти и в других разделах. .
Просмотр PDF-файла онлайн
Текст из PDF
Рисование прямоугольника: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:«Круги на воде».Нарисуйте пару десятков концентрических окружностей, то есть окружностей разного радиуса,но имеющих общий центр..
