在前端开发中，Canvas是实现图形绘制、动画交互的常用元素，当页面存在多个Canvas实例时，正确获取和动态设置它们的宽高属性是保证绘制效果正常的基础。很多开发者会混淆Canvas的style宽高和自身属性宽高，导致绘制内容出现拉伸、模糊等问题，下面我们就来梳理完整的实现方法。
获取多个Canvas元素的方法
要操作多个Canvas元素，首先需要正确选中这些元素，常用的选择方式有两种，分别适用于不同的场景。
通过类名批量获取
如果多个Canvas元素有共同的类名，可以使用getElementsByClassName或者querySelectorAll方法批量获取，返回的是类数组结构，需要遍历处理。
// 假设多个Canvas都带有类名 canvas-item
const canvasList = document.querySelectorAll('.canvas-item');
// 遍历获取每个Canvas元素
canvasList.forEach((canvas) => {
console.log(canvas);
});
通过ID逐个获取
如果每个Canvas都有独立的ID，也可以通过getElementById逐个获取，这种方式更适合需要单独处理每个Canvas的场景。
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const canvas3 = document.getElementById('canvas3');
获取Canvas宽高的正确方式
Canvas的宽高有两个相关的属性，一个是元素自身的width和height属性，另一个是CSS样式中的宽高，二者含义不同，获取时需要注意区分。
获取Canvas自身属性宽高
Canvas自身的width和height属性决定了绘制区域的实际像素尺寸，默认值分别是300和150，获取时直接访问这两个属性即可。
const canvas = document.querySelector('.canvas-item');
// 获取Canvas自身的宽高属性
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
console.log('Canvas属性宽高：', canvasWidth, canvasHeight);
获取Canvas的CSS样式宽高
CSS样式中的宽高决定了Canvas元素在页面中的显示尺寸，获取时可以通过clientWidth和clientHeight属性，或者getComputedStyle方法。
const canvas = document.querySelector('.canvas-item');
// 方式1：通过clientWidth/clientHeight获取
const showWidth = canvas.clientWidth;
const showHeight = canvas.clientHeight;
// 方式2：通过getComputedStyle获取
const computedStyle = window.getComputedStyle(canvas);
const cssWidth = parseInt(computedStyle.width);
const cssHeight = parseInt(computedStyle.height);
console.log('Canvas显示宽高：', showWidth, showHeight);
动态设置多个Canvas宽高的注意事项
动态设置Canvas宽高时，绝对不能直接修改style中的宽高，否则会导致绘制内容拉伸变形，正确的做法是修改Canvas自身的width和height属性，如果需要同步显示尺寸，再调整CSS样式。
批量设置Canvas属性宽高
遍历之前获取到的Canvas集合，直接修改每个元素的width和height属性即可，这种方式会重置Canvas的绘制上下文，需要重新绘制内容。
// 批量设置所有canvas-item类的Canvas宽高为400*300
const canvasList = document.querySelectorAll('.canvas-item');
canvasList.forEach((canvas) => {
canvas.width = 400;
canvas.height = 300;
// 重置宽高后需要重新获取上下文并绘制内容
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
同步设置显示宽高
如果需要让Canvas的显示尺寸和绘制尺寸一致，可以在设置属性宽高后，同步修改CSS的宽高样式，避免绘制内容缩放。
const canvasList = document.querySelectorAll('.canvas-item');
canvasList.forEach((canvas) => {
// 设置绘制区域尺寸
canvas.width = 800;
canvas.height = 600;
// 设置显示尺寸和绘制尺寸一致
canvas.style.width = '800px';
canvas.style.height = '600px';
});
常见误区说明
- 不要直接通过
canvas.style.width设置绘制宽高，这只会影响显示尺寸，不会改变绘制区域的像素数量，导致绘制内容模糊或拉伸。 - 修改Canvas的
width或height属性后，Canvas的绘制上下文会被重置，之前绘制的所有内容都会消失，需要重新执行绘制逻辑。 - 获取多个Canvas元素时，
getElementsByClassName返回的是动态集合，如果后续新增了同类的Canvas元素，集合会自动更新，而querySelectorAll返回的是静态集合，不会自动更新。
完整示例代码
下面是一个完整的示例，包含多个Canvas元素的获取、宽高获取和动态设置的完整逻辑。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas宽高设置示例</title>
<style>
.canvas-item {
border: 1px solid #ccc;
margin: 10px;
}
</style>
</head>
<body>
<canvas class="canvas-item"></canvas>
<canvas class="canvas-item"></canvas>
<canvas class="canvas-item"></canvas>
<button id="setSizeBtn">设置Canvas宽高为500*300</button>
<script>
const setSizeBtn = document.getElementById('setSizeBtn');
setSizeBtn.addEventListener('click', () => {
// 获取所有Canvas元素
const canvasList = document.querySelectorAll('.canvas-item');
// 遍历设置宽高
canvasList.forEach((canvas, index) => {
// 动态设置宽高，这里可以根据需要设置不同的值
const width = 500;
const height = 300;
// 设置Canvas属性宽高
canvas.width = width;
canvas.height = height;
// 同步设置显示宽高
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
// 重新绘制内容
const ctx = canvas.getContext('2d');
ctx.fillStyle = index % 2 === 0 ? 'lightblue' : 'lightgreen';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = '#333';
ctx.font = '16px Arial';
ctx.fillText('Canvas ' + (index + 1), 20, 30);
});
});
// 初始获取并打印所有Canvas的默认宽高
window.addEventListener('DOMContentLoaded', () => {
const canvasList = document.querySelectorAll('.canvas-item');
canvasList.forEach((canvas, index) => {
console.log(`Canvas ${index + 1} 默认宽高：`, canvas.width, canvas.height);
console.log(`Canvas ${index + 1} 显示宽高：`, canvas.clientWidth, canvas.clientHeight);
});
});
</script>
</body>
</html>
CanvasJavaScriptgetElementByIdsetAttributeclientWidth修改时间：2026-07-10 05:42:29