在HTML中，我们可以使用<canvas>标签来创建一个画布，要设置画布的宽高，我们需要使用CSS样式或者JavaScript代码来完成，下面我将详细介绍如何使用这两种方法来设置画布的宽高。
（图片来源网络，侵删）
1、使用CSS样式设置画布宽高
我们需要在HTML文件中创建一个<canvas>标签，并为其添加一个类名，例如myCanvas，在CSS文件中为这个类名设置宽度和高度。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<canvas class="myCanvas"></canvas>
</body>
</html>
CSS代码（styles.css）：
.myCanvas {
width: 500px; /* 设置画布宽度 */
height: 300px; /* 设置画布高度 */
}
这样，画布的宽度就被设置为500像素，高度被设置为300像素。
2、使用JavaScript代码设置画布宽高
除了使用CSS样式设置画布宽高外，我们还可以使用JavaScript代码来实现，我们需要在HTML文件中创建一个<canvas>标签，并为其添加一个ID，例如myCanvas，在JavaScript文件中获取这个元素，并设置其宽度和高度。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<script src="scripts.js"></script>
</head>
<body onload="initCanvas()">
<canvas id="myCanvas"></canvas>
</body>
</html>
JavaScript代码（scripts.js）：
function initCanvas() {
var canvas = document.getElementById("myCanvas"); // 获取画布元素
canvas.width = 500; // 设置画布宽度
canvas.height = 300; // 设置画布高度
}
这样，画布的宽度就被设置为500像素，高度被设置为300像素，我们还可以为<canvas>标签添加更多的属性，例如边框、背景颜色等，下面是一个完整的示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body onload="initCanvas()">
<canvas class="myCanvas" id="myCanvas" style="border:1px solid black; backgroundcolor:#f0f0f0;"></canvas>
</body>
</html>
CSS代码（styles.css）：
.myCanvas {
width: 500px; /* 设置画布宽度 */
height: 300px; /* 设置画布高度 */
}
JavaScript代码（scripts.js）：
function initCanvas() {
var canvas = document.getElementById("myCanvas"); // 获取画布元素
canvas.width = 500; // 设置画布宽度
canvas.height = 300; // 设置画布高度
}
在HTML中，我们可以通过CSS样式或者JavaScript代码来设置画布的宽高，使用CSS样式的方法是直接在样式表中为<canvas>标签的类名设置宽度和高度；使用JavaScript代码的方法是在JavaScript文件中获取<canvas>标签的元素，并为其设置宽度和高度，我们还可以为<canvas>标签添加更多的属性，以满足不同的需求。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/440082.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
