HTML5キャンバス要素内のSVG

Question

HTML5キャンバス要素にSVGイメージを含めるにはどうすればよいのですか？ブラウザウィンドウのサイズを変更するとSVGのサイズも調整されますか？

Answer 1

これは、私がちょうど正しい方向にあなたを指摘するつもりであることを実証するためにかなり定型コードを必要とします。

myCanvasという名前のキャンバスオブジェクト/要素にアクセスできるとします。 var ctx = myCanvas.getContext('2d')を実行すると、ctxはCanvasRenderingContext2Dのインスタンスになります。

• dxとdyは、左上隅からのオフセットである：あなたがあなたのイメージimgを描画するとき今、あなたはctx.drawImage(img, dx, dy, sw, sh)を実行します。
• 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 
};