HTML5 canvas元素中的SVG

Question

如何在HTML5 canvas元素中包含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 
};