Skip to content

Latest commit

 

History

History
417 lines (351 loc) · 27.6 KB

Chapter9.md

File metadata and controls

417 lines (351 loc) · 27.6 KB
Raw

Глава 9. Работа с графикой

Тема 1. SVG

  1. Какие из утвердждений верны
<svg width="50" height="50">
  <rect x="0" y="0" height="25" width="25" fill="red"></rect>
  <circle destination="over" cx="25" cy="25" r="25" fill="blue"></circle>
</svg>
  1. SVG - это масштабируемая векторная графика
  2. В результате мы увидим полностью красный квадрат, который занимает верхнюю левую четверть
  3. В результате мы увидим полностью синий круг, диаметром 50px
  4. В результате мы увидим часть красного квадрата, остальная часть будет под кругом
  5. В результате мы увидим часть синего круга, который будет перекрыт красным квадратом

Правильные ответы: 1, 3, 4

  1. Какие из утвердждений верны
<svg width="50" height="50">
  <circle destination="over" cx="25" cy="25" r="25" fill="blue"></circle>
  <rect x="0" y="0" height="25" width="25" fill="red"></rect>
</svg>
  1. Формат SVG представляет собой точное, не зависящее от разрешения экрана описание шагов, которые необходимо выполнить, чтобы нарисовать требуемый рисунок
  2. В результате мы увидим полностью красный квадрат, который занимает верхнюю левую четверть
  3. В результате мы увидим полностью синий круг, диаметром 50px
  4. В результате мы увидим часть красного квадрата, остальная часть будет под кругом
  5. В результате мы увидим часть синего круга, который будет перекрыт красным квадратом

Правильные ответы: 1, 2, 5

  1. Какие из утвердждений верны
<svg width="50" height="50">
  <circle destination="over" cx="40" cy="40" r="10" fill="blue"></circle>
  <rect x="0" y="0" height="25" width="25" fill="red"></rect>
</svg>
  1. Формат SVG представляет собой точное, зависящее от разрешения экрана описание шагов, которые необходимо выполнить, чтобы нарисовать требуемый рисунок
  2. В результате мы увидим полностью красный квадрат, который занимает верхнюю левую четверть
  3. В результате мы увидим полностью синий круг, диаметром 50px
  4. В результате мы увидим часть красного квадрата, остальная часть будет под кругом
  5. В результате мы увидим часть синего круга, который будет перекрыт красным квадратом

Правильные ответы: 2, 3

  1. Какие из утвердждений верны
<svg width="50" height="50">
  <rect x="0" y="0" height="25" width="25" fill="red"></rect>
  <circle destination="over" cx="40" cy="40" r="10" fill="blue"></circle>
</svg>
  1. SVG - это не масштабируемая векторная графика
  2. В результате мы увидим полностью красный квадрат, который занимает верхнюю левую четверть
  3. В результате мы увидим полностью синий круг, диаметром 50px
  4. В результате мы увидим часть красного квадрата, остальная часть будет под кругом
  5. В результате мы увидим часть синего круга, который будет перекрыт красным квадратом

Правильные ответы: 2, 3

  1. Какие из утвердждений верны
<svg width="50" height="50">
  <circle destination="over" cx="0" cy="0" r="25" fill="blue"></circle>
  <rect x="25" y="25" height="25" width="25" fill="red"></rect>
</svg>
    1. Формат SVG представляет собой точное, не зависящее от разрешения экрана описание шагов, которые необходимо выполнить, чтобы нарисовать требуемый рисунок
  2. В результате мы увидим полностью красный квадрат
  3. В результате мы увидим полностью синий круг, диаметром 50px
  4. В результате мы увидим часть красного квадрата, остальная часть будет под кругом
  5. В результате мы увидим часть синего круга

Правильные ответы: 1, 2, 5

Тема 2. Canvas

  1. Какие из утвержджений верны
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    ctx2 = canvas.getContext('2d');
    
  ctx.fillRect(0, 0, 500, 500);
</script>
  1. Canvas - это растровый холст
  2. ctx === ctx2
  3. В результате на экране будет черный квадрат шириной 500px
  4. В результате на экране будет пустой холст
  5. В результате на экране будет красный квадрат шириной 500px

Правильные ответы: 1, 2, 3

  1. Какие из утвержджений верны
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    ctx2 = canvas.getContext('2d');
    
  ctx.fillRect(0, 0, 500, 500);
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 500, 500);  
</script>
  1. Canvas - это векторный холст
  2. ctx === ctx2
  3. В результате на экране будет черный квадрат шириной 500px
  4. В результате на экране будет пустой холст
  5. В результате на экране будет красный квадрат шириной 500px

Правильные ответы: 2, 5

  1. Какие из утвержджений верны
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    ctx2 = canvas.getContext('2d');
    
  ctx.fillRect(0, 0, 500, 500);
  ctx.fillStyle = 'red';
  ctx2.fillRect(0, 0, 500, 500);  
</script>
  1. Canvas - это растровый холст. Может имееть только 1 контекст рисования
  2. ctx === ctx2
  3. В результате на экране будет черный квадрат шириной 500px
  4. В результате на экране будет пустой холст
  5. В результате на экране будет красный квадрат шириной 500px

Правильные ответы: 1, 2, 5

  1. Какие из утвержджений верны
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    ctx2 = canvas.getContext('2d');
    
  ctx2.fillStyle = 'red';
  ctx2.fillRect(0, 0, 500, 500);  
  ctx.fillRect(0, 0, 500, 500);
</script>
  1. Canvas - это растровый холст. Может имееть несколько контекстов рисования
  2. ctx === ctx2
  3. В результате на экране будет черный квадрат шириной 500px
  4. В результате на экране будет пустой холст
  5. В результате на экране будет красный квадрат шириной 500px

Правильные ответы: 2, 5

  1. Какие из утвержджений верны
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    ctx2 = canvas.getContext('2d');
    
  ctx2.fillStyle = 'red';
  ctx2.fillRect(0, 0, 500, 500);  
  ctx.fillRect(0, 0, 500, 500);
  
  canvas.width = canvas.width; 
</script>
  1. Canvas - это растровый холст. Может имееть только 1 контекст рисования
  2. ctx !== ctx2
  3. В результате на экране будет черный квадрат шириной 500px
  4. В результате на экране будет пустой холст
  5. В результате на экране будет красный квадрат шириной 500px

Правильные ответы: 1, 4

Тема 3. Canvas, drawImage

  1. Что выведет в консоль browser следующий код
var
  canvas = document.getElementById('myCanvas'),
  ctx = canvas.getContext('2d'),
  img = new Image(),
  imgSrc = 'image.jpg'; //картинка с того же домена, без соответсвующе выставленного `header Access-Control-Allow-Origin` 

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    console.log(canvas.toDataURL());
  };

  img.src = imgSrc;
  1. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  2. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  3. Binary data картинки в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  4. SecurityError
  5. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована с измененным масштабом, с шириной и высотой в 500 px

Правильные ответы: 1

  1. Что выведет в консоль browser следующий код
var
  canvas = document.getElementById('myCanvas'),
  ctx = canvas.getContext('2d'),
  img = new Image(),
  imgSrc = 'image.jpg'; //картинка с того же домена, без соответсвующе выставленного `header Access-Control-Allow-Origin` 

  img.onload = function () {
    ctx.drawImage(img, 0, 0, 500, 500);
    console.log(canvas.toDataURL());
  };

  img.src = imgSrc;
  1. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  2. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  3. Binary data картинки в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  4. SecurityError
  5. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована с измененным масштабом, с шириной и высотой в 500 px

Правильные ответы: 5

  1. Что выведет в консоль browser следующий код
var
  canvas = document.getElementById('myCanvas'),
  ctx = canvas.getContext('2d'),
  img = new Image(),
  imgSrc = 'image.jpg'; //картинка с того же домена, c соответсвующе выставленным `header Access-Control-Allow-Origin` 

  img.onload = function () {
    ctx.drawImage(img, 0, 0, 500, 500);
    console.log(canvas.toDataURL('image/jpeg'));
  };

  img.src = imgSrc;
  1. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  2. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  3. Binary data картинки в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  4. SecurityError
  5. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована с измененным масштабом, с шириной и высотой в 500 px

Правильные ответы: 5

  1. Что выведет в консоль browser следующий код
var
  canvas = document.getElementById('myCanvas'),
  ctx = canvas.getContext('2d'),
  img = new Image(),
  imgSrc = 'http://otherdomain.com/image.jpg'; //картинка с другого домена, без соответсвующе выставленного `header Access-Control-Allow-Origin` 

  img.onload = function () {
    ctx.drawImage(img, 0, 0, 500, 500);
    console.log(canvas.toDataURL('image/jpeg'));
  };

  img.src = imgSrc;
  1. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  2. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  3. Binary data картинки в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  4. SecurityError
  5. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована с измененным масштабом, с шириной и высотой в 500 px

Правильные ответы: 4

  1. Что выведет в консоль browser следующий код
var
  canvas = document.getElementById('myCanvas'),
  ctx = canvas.getContext('2d'),
  img = new Image(),
  imgSrc = 'http://otherdomain.com/image.jpg'; //картинка с другого домена, без соответсвующе выставленного `header Access-Control-Allow-Origin` 

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    console.log(canvas.toDataURL());
  };

  img.src = imgSrc;
  1. base64 картинку в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  2. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  3. Binary data картинки в формате png, размерами 500 на 500 px, при этом img будет отрисована в оригинальном масштабе, с видимой частью максимум 500 на 500 px
  4. SecurityError
  5. base64 картинку в формате jpeg, размерами 500 на 500 px, при этом img будет отрисована с измененным масштабом, с шириной и высотой в 500 px

Правильные ответы: 4

Тема 4. Canvas, scale, transform

  1. Какие из утверждений верны
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

  ctx.strokeRect(5, 5, 100, 100);
  ctx.scale(2, 2);
  ctx.strokeRect(5, 5, 100, 100);
</script>
  1. На холсте будет изображен прямоугольник с черными границами
  2. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px при этом верхний левый угол будет иметь координату (5, 5), а второй с размерами 200 на 200 px при этом верхний левый угол будет иметь координату (10, 10)
  3. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px, а второй с размерами 200 на 200 px, при этом верхние левые углы прямоугольников будут иметь одинаковую координату
  4. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхние левые углы прямоугольников будут иметь одинаковую координату
  5. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхний левый угол 2-го прямоугольника будет смещен на 50px как по оси X так и по оси Y относительно верхнего левого угла первого прямоугольника

Правильные ответы: 2

  1. Какие из утверждений верны
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

  ctx.strokeRect(5, 5, 100, 100);
  ctx.transform(2, 0, 0, 2, 0, 0);
  ctx.strokeRect(5, 5, 100, 100);
</script>
  1. На холсте будет изображен прямоугольник с черными границами
  2. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px при этом верхний левый угол будет иметь координату (5, 5), а второй с размерами 200 на 200 px при этом верхний левый угол будет иметь координату (10, 10)
  3. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px, а второй с размерами 200 на 200 px, при этом верхние левые углы прямоугольников будут иметь одинаковую координату
  4. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхние левые углы прямоугольников будут иметь одинаковую координату
  5. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхний левый угол 2-го прямоугольника будет смещен на 50px как по оси X так и по оси Y относительно верхнего левого угла первого прямоугольника

Правильные ответы: 2

  1. Какие из утверждений верны
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

  ctx.strokeRect(5, 5, 100, 100);
  ctx.translate(50, 50);
  ctx.strokeRect(5, 5, 100, 100);
</script>
  1. На холсте будет изображен прямоугольник с черными границами
  2. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px при этом верхний левый угол будет иметь координату (5, 5), а второй с размерами 200 на 200 px при этом верхний левый угол будет иметь координату (10, 10)
  3. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px, а второй с размерами 200 на 200 px, при этом верхние левые углы прямоугольников будут иметь одинаковую координату
  4. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхние левые углы прямоугольников будут иметь одинаковую координату
  5. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхний левый угол 2-го прямоугольника будет смещен на 50px как по оси X так и по оси Y относительно верхнего левого угла первого прямоугольника

Правильные ответы: 5

  1. Какие из утверждений верны
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

  ctx.strokeRect(5, 5, 100, 100);
  ctx.scale(0.5, 0.5);
  ctx.transform(2, 0, 0, 2, 0, 0);
  ctx.strokeRect(5, 5, 100, 100);
</script>
  1. На холсте будет изображен прямоугольник с черными границами
  2. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px при этом верхний левый угол будет иметь координату (5, 5), а второй с размерами 200 на 200 px при этом верхний левый угол будет иметь координату (10, 10)
  3. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px, а второй с размерами 200 на 200 px, при этом верхние левые углы прямоугольников будут иметь одинаковую координату
  4. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхние левые углы прямоугольников будут иметь одинаковую координату
  5. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхний левый угол 2-го прямоугольника будет смещен на 50px как по оси X так и по оси Y относительно верхнего левого угла первого прямоугольника

Правильные ответы: 4

  1. Какие из утверждений верны
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var
    canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

  ctx.strokeRect(5, 5, 100, 100);
  ctx.translate(0, 0);
  ctx.transform(2, 0, 0, 2, 0, 0);
  ctx.strokeRect(5, 5, 100, 100);
</script>
  1. На холсте будет изображен прямоугольник с черными границами
  2. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px при этом верхний левый угол будет иметь координату (5, 5), а второй с размерами 200 на 200 px при этом верхний левый угол будет иметь координату (10, 10)
  3. На холсте будут изображены 2 прямоугольника с черными границами. Один с размерами 100 на 100 px, а второй с размерами 200 на 200 px, при этом верхние левые углы прямоугольников будут иметь одинаковую координату
  4. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхние левые углы прямоугольников будут иметь одинаковую координату
  5. На холсте будут изображены 2 одинаковых прямоугольника с черными границами. При этом верхний левый угол 2-го прямоугольника будет смещен на 50px как по оси X так и по оси Y относительно верхнего левого угла первого прямоугольника

Правильные ответы: 2