HTML5 Canvas 适配窗口
当您在移动设备、PC、桌面电脑或平板电脑等不同屏幕上查看包含 Canvas 的网页时，屏幕尺寸会不断变化。因此，为了获得更好的用户体验，Canvas 有必要根据屏幕调整大小。
在本文中，我们将学习如何调整 HTML5 Canvas 的大小以适应窗口。
首先，让我们进一步了解 HTML5。
HTML5
HTML(超文本标记语言)是网页的标准标记语言。使用 HTML，您可以创建自己的网站。
HTML5 是 HTML 的更新版本，其中采用了先进的技术。它的开发是为了彻底解决与新浏览器的兼容性问题，并引入一些新功能，例如多平台兼容性，以及借助标题、部分、文章标签等使用标记语言提供的更多页面布局选项。
HTML5 开发人员的一大成就是它支持多媒体，即移动设备上的视频和音频。为此，HTML5 引入了新功能，例如视频、音频和画布标签。此外，HTML5 支持 JavaScript 代码直接在浏览器上运行。
什么是 HTML5 Canvas?
画布本质上是网页中一个封闭的矩形区域。默认情况下，它没有边框和内容。HTML5 的 canvas 元素使用户能够使用 JavaScript 在网页上绘制动态 2D 图形和添加图片。它由 <canvas> 标签表示。 Chrome、Safari、Internet Explorer、Firefox 以及 Opera 均支持此元素。
默认情况下，canvas元素的高度为 150px，宽度为 300px。您可以根据需要使用 CSS 自定义其大小和边框。
语法
<canvas id= "" ></canvas>
示例
<html> <body> <canvas id= "demo" height= "170" width = "260" style = " border: 2px solid #000000;" ></canvas> </body> </html>
代码中，
Height 和 width 分别指定画布的高度和宽度。它可以有多种值，例如 auto (由浏览器指定)、length (像素、厘米、毫米等)、initial (默认值)和 inherit (从其父元素继承的值)。
示例
高度为 49px，宽度为 90%。 style = " border : 2px solid #000000;"
CSS 的 border 属性允许用户使用宽度、高度、样式、颜色等参数指定要显示的边框类型。
边框样式有多种值，例如 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"，以使画布适合窗口。
此外，body 元素通过将其高度和宽度值设置为 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 来实现。
