html 画布

在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.kdun.com/ask/362856.html

html 画布

发表回复