Code
2023-09-27 07:00:04

调整HTML5画布大小以适应窗口

如何自动缩放HTML5 <canvas>元素以适应页面?

例如，我可以得到一个<div>通过设置高度和宽度属性为100%缩放，但一个<canvas>不会缩放，会吗?

当前回答

下面是一个小而完整的代码片段，它结合了所有的答案。按:“运行代码片段”，然后按“完整页面”，调整窗口大小，以查看其运行情况:

function refresh(referenceWidth, referenceHeight, drawFunction) { const myCanvas = document.getElementById("myCanvas"); myCanvas.width = myCanvas.clientWidth; myCanvas.height = myCanvas.clientHeight; const ratio = Math.min( myCanvas.width / referenceWidth, myCanvas.height / referenceHeight ); const ctx = myCanvas.getContext("2d"); ctx.scale(ratio, ratio); drawFunction(ctx, ratio); window.requestAnimationFrame(() => { refresh(referenceWidth, referenceHeight, drawFunction); }); } //100, 100 is the "reference" size. Choose whatever you want. refresh(100, 100, (ctx, ratio) => { //Custom drawing code! Draw whatever you want here. const referenceLineWidth = 1; ctx.lineWidth = referenceLineWidth / ratio; ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.arc(50, 50, 49, 0, 2 * Math.PI); ctx.stroke(); }); div { width: 90vw; height: 90vh; } canvas { width: 100%; height: 100%; object-fit: contain; } <div> <canvas id="myCanvas"></canvas> </div>

这个片段使用画布。clientWidth和canvas。clientHeight而不是window。innerWidth和window。innerHeight使代码段在复杂布局中正确运行。然而，如果你只是把它放在一个使用全窗口的div中，它也适用于全窗口。这样更灵活。

代码片段使用了新窗口。请求animationframe重复调整画布的大小每帧。如果不能使用此方法，请使用setTimeout代替。而且，这是低效的。为了提高效率，存储clientWidth和clienttheight，只有当clientWidth和clienttheight改变时才重新计算和绘制。

“参考”分辨率的想法让你可以使用一个分辨率编写所有的绘制命令……并且它会自动调整到客户端大小，而无需更改绘图代码。

这个片段是不言自明的，但如果你喜欢用英语解释:https://medium.com/@doomgoober/resizing-canvas-vector-graphics- with-aliasing -7a1f9e684e4d

2020-08-28 23:36:14

其他回答

设置初始大小。

const canvas = document.getElementById('canvas');

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

更新窗口大小调整。

function windowResize() {
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', windowResize);
2020-11-24 07:08:56

除非你想让画布自动提升你的图像数据(这就是James Black的答案，但它看起来不漂亮)，你必须自己调整它的大小并重新绘制图像。画布居中

2009-11-04 13:52:23

下面的解决方案对我来说效果最好。因为我对编码相对陌生，所以我喜欢用视觉来确认某些东西是否按照我期望的方式工作。我在以下地点找到了它: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

代码如下:

(function() { var // Obtain a reference to the canvas element using its id. htmlCanvas = document.getElementById('c'), // Obtain a graphics context on the canvas element for drawing. context = htmlCanvas.getContext('2d'); // Start listening to resize events and draw canvas. initialize(); function initialize() { // Register an event listener to call the resizeCanvas() function // each time the window is resized. window.addEventListener('resize', resizeCanvas, false); // Draw canvas border for the first time. resizeCanvas(); } // Display custom canvas. In this case it's a blue, 5 pixel // border that resizes along with the browser window. function redraw() { context.strokeStyle = 'blue'; context.lineWidth = '5'; context.strokeRect(0, 0, window.innerWidth, window.innerHeight); } // Runs each time the DOM window resize event fires. // Resets the canvas dimensions to match window, // then draws the new borders accordingly. function resizeCanvas() { htmlCanvas.width = window.innerWidth; htmlCanvas.height = window.innerHeight; redraw(); } })(); html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow: hidden; /* Disable scrollbars */ display: block; /* No floating content on sides */ } <canvas id='c' style='position:absolute; left:0px; top:0px;'></canvas>

蓝色边框显示了调整画布的边缘，并且总是沿着窗口的边缘，在所有4个面都可见，这不是上述其他一些答案的情况。希望能有所帮助。

2015-03-06 14:05:20

如果你的div完全填满了网页，那么你可以填充这个div，这样就有一个画布来填充这个div。

你可能会发现这很有趣，因为你可能需要使用css来使用百分比，但是，这取决于你使用的浏览器，以及它在多大程度上符合规范: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

画布的内在尺寸 元素的大小相等 用数字来坐标空间 用CSS像素解释。然而, 元素的大小可以任意设置 通过样式表。在呈现期间, 图像按比例缩放以适应此布局 大小。

您可能需要获取div的offsetWidth和height，或者获取窗口的高度/宽度并将其设置为像素值。

2009-11-03 02:29:18

一个纯CSS的方法添加到解决方案@jerseyboy上面。 适用于Firefox (v29测试)，Chrome (v34测试)和Internet Explorer (v11测试)。

<!DOCTYPE html>
<html>
    <head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            background-color: #ccc;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    </script>
</body>
</html>

链接到示例:http://temporaer.net/open/so/140502_canvas-fit-to-window.html

但要小心，正如@jerseyboy在他的评论中所说:

用CSS重新缩放画布是很麻烦的。至少在Chrome和 Safari中，鼠标/触摸事件的位置不会1:1对应 Canvas像素位置，你需要变换坐标 系统。

2014-05-02 18:51:41

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1