SVG в элементе HTML5 canvas - PullRequest
Новая
       10

SVG в элементе HTML5 canvas

0 голосов
/ 27 декабря 2011

Как включить изображение SVG в элемент холста HTML5, чтобы оно также регулировало размер SVG при изменении размера окна браузера?

1 Ответ

4 голосов
/ 27 декабря 2011

Для демонстрации требуется довольно много стандартного кода, поэтому я просто укажу вам правильное направление.

Скажем, у вас есть доступ к объекту / элементу холста с именем myCanvas.Когда вы выполняете var ctx = myCanvas.getContext('2d'), ctx является экземпляром CanvasRenderingContext2D.Теперь, когда вы рисуете ваше изображение img, вы выполняете ctx.drawImage(img, dx, dy, sw, sh), где:

  • dx и dy - это смещение от верхнего левого угла.
  • sw и sh - абсолютный размер изображения.

Итак, вы настраиваете размер изображения с помощью sw и sh.Вы хотите, чтобы они зависели от размера холста, к которому вы можете получить доступ с помощью myCanvas.height и myCanvas.width.

. Вы хотите, чтобы ширина / высота холста зависела от размера окна.Размер окна доступен с window.innerWidth и window.innerHeight.Когда вы изменяете размер, вы можете слушать это событие так: window.addEventListener('resize', function (evt) { /* handle resize here */ });.Пример: 

var updateCanvasSize, canvasRelativeSize;

canvasRelativeSize = .5;

updateCanvasSize = function (evt) {
  myCanvas.width  = canvasRelativeSize * window.innerWidth;
  myCanvas.height = canvasRelativeSize * window.innerHeight;
  draw(); // redraws the canvas since size has changed
};
...