描画

高解像度レスポンシブCanvas

画面サイズと端末のピクセル密度に合わせてCanvasを鮮明に保ちます。

ライセンス: CC0・商用利用／改変／再配布可・クレジット不要
使い方: CanvasのCSSサイズを決めたうえで resizeCanvas() を一度呼び出します。

組み込みコード

const view = { width: 0, height: 0 };
let resizeFrame = 0;

function resizeCanvas() {
  const rect = canvas.getBoundingClientRect();
  if (rect.width < 1 || rect.height < 1) return;
  const ratio = Math.min(devicePixelRatio || 1, 2);
  const width = Math.round(rect.width * ratio);
  const height = Math.round(rect.height * ratio);
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width;
    canvas.height = height;
  }
  context.setTransform(ratio, 0, 0, ratio, 0, 0);
  view.width = rect.width;
  view.height = rect.height;
  draw();
}

function requestResize() {
  cancelAnimationFrame(resizeFrame);
  resizeFrame = requestAnimationFrame(resizeCanvas);
}

addEventListener("resize", requestResize);
addEventListener("orientationchange", requestResize);
visualViewport?.addEventListener("resize", requestResize);
new ResizeObserver(requestResize).observe(canvas);
requestResize();

MADE WITH THIS ASSET

このアセットを使ったゲーム

このアセットを利用した公開作品はまだありません。