Question

如何在HTML5画布元素中包含SVG图像，以便在更改浏览器窗口大小时调整SVG的大小？

Answer 1

这需要一些样板代码来证明，所以我只是指出你正确的方向。

假设您可以访问名为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
};

HTML5 canvas元素中的SVG

1 个答案: