详细讲解Canvas画布尺寸设置方法，HTML属性与CSS样式的区别，包含多个交互式案例 Canvas画布尺寸的设置方式直接影响图形的显示效果。理解HTML属性与CSS样式的区别非常重要。
通过width和height属性设置：
<canvas width="400" height="300"></canvas>
这种方式设置的是绑制缓冲区的尺寸，决定绑制精度。
通过CSS设置显示尺寸：
canvas {
width: 400px;
height: 300px;
}
这种方式设置的是显示尺寸，决定画布在页面中的大小。
HTML属性: 200x100
HTML属性: 200x100, CSS: 400x200
<!-- 正确设置：HTML属性与显示尺寸一致 -->
<canvas id="canvas1" width="200" height="100"></canvas>
<!-- 错误设置：HTML属性与CSS不一致导致模糊 -->
<canvas id="canvas2" width="200" height="100" style="width: 400px; height: 200px;"></canvas>
<script>
function drawContent(canvasId) {
const canvas = document.getElementById(canvasId)
const ctx = canvas.getContext('2d')
// 绘制圆形
ctx.strokeStyle = '#3498db'
ctx.lineWidth = 2
ctx.beginPath()
ctx.arc(100, 50, 40, 0, Math.PI * 2)
ctx.stroke()
// 绘制矩形
ctx.fillStyle = '#e74c3c'
ctx.fillRect(10, 10, 30, 30)
}
drawContent('canvas1')
drawContent('canvas2')
</script>
| 设置方式 | 效果 | 说明 |
|---|---|---|
| HTML属性 | 绑制缓冲区尺寸 | 决定绑制精度 |
| CSS样式 | 显示尺寸 | 决定页面显示大小 |
| 不一致 | 图像拉伸/模糊 | 避免这种情况 |
当前尺寸: 200 x 100
<button onclick="resizeCanvas(200, 100)">200x100</button>
<button onclick="resizeCanvas(400, 200)">400x200</button>
<canvas id="myCanvas" width="200" height="100"></canvas>
<p id="sizeInfo">当前尺寸: 200 x 100</p>
<script>
function resizeCanvas(w, h) {
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const sizeInfo = document.getElementById('sizeInfo')
// 设置新的画布尺寸
canvas.width = w
canvas.height = h
// 注意：设置尺寸会清空画布，需要重新绑制
// 绘制网格
const gridSize = 20
ctx.strokeStyle = '#ecf0f1'
ctx.lineWidth = 1
for (let x = 0; x <= w; x += gridSize) {
ctx.beginPath()
ctx.moveTo(x, 0)
ctx.lineTo(x, h)
ctx.stroke()
}
for (let y = 0; y <= h; y += gridSize) {
ctx.beginPath()
ctx.moveTo(0, y)
ctx.lineTo(w, y)
ctx.stroke()
}
// 绘制中心圆
ctx.fillStyle = '#3498db'
ctx.beginPath()
ctx.arc(w / 2, h / 2, Math.min(w, h) / 4, 0, Math.PI * 2)
ctx.fill()
sizeInfo.textContent = `当前尺寸: ${w} x ${h}`
}
</script>
| 操作 | 说明 |
|---|---|
canvas.width = w | 设置画布宽度，会清空画布 |
canvas.height = h | 设置画布高度，会清空画布 |
| 重绘内容 | 尺寸改变后需要重新绑制 |
画布尺寸: 0 x 0
<div id="container" style="width: 100%;">
<canvas id="myCanvas" style="width: 100%;"></canvas>
</div>
<p id="info">画布尺寸: 0 x 0</p>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const container = document.getElementById('container')
const info = document.getElementById('info')
function resizeCanvas() {
// 获取容器宽度
const w = container.clientWidth
// 按比例计算高度
const h = Math.round(w * 0.5)
// 设置画布尺寸（HTML属性）
canvas.width = w
canvas.height = h
// 绘制内容
ctx.fillStyle = '#3498db'
ctx.fillRect(w / 2 - 50, h / 2 - 25, 100, 50)
info.textContent = `画布尺寸: ${w} x ${h}`
}
// 初始化
resizeCanvas()
// 监听窗口大小变化
window.addEventListener('resize', resizeCanvas)
</script>
| 方法 | 说明 |
|---|---|
container.clientWidth | 获取容器内容宽度 |
window.resize 事件 | 监听窗口大小变化 |
| 比例计算高度 | 保持画布宽高比 |
width: 300, height: 150
width: 400px, height: 200px
X: 1.33, Y: 1.33
尺寸不一致，图像会模糊
<canvas id="myCanvas" width="300" height="150" style="width: 400px; height: 200px;"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
// 获取HTML属性尺寸（绑制尺寸）
const bufferWidth = canvas.width
const bufferHeight = canvas.height
// 获取CSS显示尺寸
const computedStyle = window.getComputedStyle(canvas)
const displayWidth = parseInt(computedStyle.width)
const displayHeight = parseInt(computedStyle.height)
// 计算缩放比例
const scaleX = displayWidth / bufferWidth
const scaleY = displayHeight / bufferHeight
console.log('绑制尺寸:', bufferWidth, 'x', bufferHeight)
console.log('显示尺寸:', displayWidth, 'x', displayHeight)
console.log('缩放比例:', scaleX, scaleY)
// 检查是否一致
if (Math.abs(scaleX - 1) > 0.01 || Math.abs(scaleY - 1) > 0.01) {
console.warn('警告：绑制尺寸与显示尺寸不一致，图像会模糊')
}
</script>
| 属性/方法 | 说明 |
|---|---|
canvas.width/height | HTML属性，绑制缓冲区尺寸 |
getComputedStyle() | 获取CSS计算样式 |
| 缩放比例 | 显示尺寸 / 绑制尺寸 |
function setupCanvas(canvas, width, height) {
canvas.width = width
canvas.height = height
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
}
function setupResponsiveCanvas(canvas, container) {
const width = container.clientWidth
const height = Math.round(width * 0.5)
canvas.width = width
canvas.height = height
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
return { width, height }
}
画布尺寸设置要点：