HTML5 Canvas 适应窗口大小

当您在不同的屏幕（例如手机、电脑、台式机或平板电脑）上查看包含画布的网页时，屏幕的大小每次都会发生变化。因此，为了获得更好的用户体验，画布需要根据屏幕大小调整自身大小。

在本文中，我们将学习如何调整 HTML5 画布的大小以适应窗口。

让我们首先了解有关 HTML5 的更多信息。

HTML5

HTML（超文本标记语言）是网页的标准标记语言。使用 HTML，您可以创建自己的网站。

HTML5 是 HTML 的更新版本，其中使用了先进的技术。它的开发是为了解决与新浏览器兼容性问题，并引入某些新功能，例如跨平台兼容性、使用标题、部分、文章标签等标记语言提供更多页面布局选项。

HTML5 开发人员取得的一大成就之一是它支持多媒体，即移动设备上的视频和音频。引入了新的功能来支持此功能，例如视频、音频和画布标签。此外，HTML5支持 Javascript 代码直接在浏览器上运行。

什么是 HTML5 Canvas？

基本上，画布是网页中一个矩形封闭区域。默认情况下，它没有边框和内容。HTML5 的画布元素使用 Javascript 允许用户在网页上绘制动态 2D 图形并添加图片。它由<canvas>标签表示。此元素受 Chrome、Safari、Internet Explorer、Firefox 以及 Opera 支持。

默认情况下，画布元素的高度为 150px，宽度为 300px。根据您的需要，您可以使用 CSS 自定义其大小和边框。

语法

<canvas id= “” ></canvas>

示例

<html>
<body>
   <canvas id= “demo” height= “170” width = ”260” style = “ border: 2px solid #000000;” ></canvas>
</body>
</html>

在代码中，
高度和宽度分别指定画布的高度和宽度。它可以具有各种值，例如自动（由浏览器分配）、长度（px、cm、mm 等）、初始（默认值）和继承（从其父元素继承的值）。

示例

height of 49px and width of 90%.
style = “ border : 2px solid #000000;”

CSS 的 border 属性允许用户使用宽度、高度、样式、颜色等指定要显示的边框类型。

Border-style 有多种值，例如 solid、dotted、double、none、hidden、inset 等。

在上面的代码中，2px 是边框宽度，solid 是边框样式，而 #000000 是黑色的十六进制颜色代码。

十六进制颜色代码是用于在万维网上指定颜色的字母数字代码。每种颜色都有其唯一的十六进制颜色代码。例如，白色为 #FFFFFF，蓝色为 #0000FF，红色为 #FF0000，黄色为 #FFFF00 等。

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

在本节中，我们将了解一些调整 HTML5 画布大小以适应窗口的方法。

方法 1：使用 CSS

为了使画布填充窗口，您可以使用 CSS 调整其大小。

示例

<html>
   <style>
      body {
         height : 100%;
         width : 100%;
      }
      canvas { 
         background-color: #ffff00;
         display: block;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         height: 100%;
         width: 100%;
      }
   </style>
<body>
   <canvas> </canvas>
</body>

将显示一个填充整个屏幕的黄色画布。

在上面的程序中，

画布的宽度和高度设置为 100%。位置为绝对，顶部、左侧、右侧和底部为“0”，以使画布适应窗口。

此外，主体元素通过将其高度和宽度值分配为 100% 来填充窗口。

方法 2：使用 Javascript

示例

<html>
   <style>
      body {
         width: 100%;
         height: 100%;
         overflow: hidden;
         display: block;
      }
   </style>
<body>
   <script>
      (function() {
         var myCanvas = document.getElementById(‘demo’) 
         // refering to the canvas using its id
         var content = myCanvas.getContext('2d');  
         function start() {
            screen.addEventListener('resize', fitCanvas, false);
            fitCanvas();    // initial canvas border
         }
         function resize() {
            content.strokeStyle = 'red';
            content.lineWidth = '10’;
            content.strokeRect(0, 0, screen.innerWidth, screen.innerHeight);
         }
         function fitCanvas() {
            myCanvas.width = screen.innerWidth;
            myCanvas.height = screen.innerHeight;
            resize();
         }
      })();
   </script>
   <canvas id='demo' style='position: absolute; right :0px; bottom : 0px;'></canvas>
</body>
</html>

显示一个蓝色边框的画布，该画布适合窗口。

这里，

  • 溢出 - hidden 用于裁剪元素的多余内容，使其余内容隐藏。

  • 显示 - block 用于以块元素（如<p>、<h2>等）的形式显示任何元素。它在其上方和下方都有空白。

  • getContext - 用于在画布元素上获取图形上下文。

  • screen.addEventListener('resize', fitCanvas, false); - 这段代码允许用户创建一个事件侦听器，该侦听器在屏幕大小发生变化时都会调用 fitCanvas 函数

  • resize() - 用于向画布添加样式。这里，它具有红色、10 像素的边框，可随窗口一起调整大小。

  • 每次窗口更改其大小时，画布都会相应地更改其尺寸以适应它。

结论

可以调整 HTML5 画布的大小，即更改其尺寸，以相应地适应整个屏幕。这可以通过使用 Javascript 或 CSS 来完成。

更新于： 2022 年 10 月 12 日

10K+ 次观看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告