小编Sim*_*177的帖子

画布设备方向缩放

我做了一个赛车游戏。我正在尝试使其在移动设备上可扩展。

当设备方向正常（垂直）时，我能够让它看起来很好：

但是当我将设备旋转到水平视图时，会发生这种情况：（如何将其缩小一点）？

你会建议做什么？我曾经display: none 隐藏图像。我真的很感激任何帮助。

编辑：我已经设法做到了，但视图仍然放大太多，有什么想法吗？

const width = 800;
const height = 600;
const pixelRatio = window.devicePixelRatio || 1;
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;

canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;

// for sprites scaled up to retina resolution
canvas.mozImageSmoothingEnabled = false;
canvas.imageSmoothingEnabled = false;

c.scale(pixelRatio, pixelRatio);

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height">

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <title>Canvas Story</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: …

Run Code Online (Sandbox Code Playgroud)

html javascript canvas

Sim*_*177

2020 12-17

6
推荐指数

1
解决办法

247
查看次数

标签统计

canvas ×1

html ×1

javascript ×1

画布设备方向缩放

标签 统计

小编Sim_177的帖子

标签统计