HTML5 Canvas标签尺寸的正确设置方式及原因解析

Canvas有两个完全不同的尺寸属性，得先搞清楚两者的区别，才能明白哪种写法是正确的：

两种写法的本质区别 #

• canvas.width = 750; canvas.height = 250;
  这是设置Canvas的绘图缓冲区分辨率，也就是画布实际能容纳的像素数量。比如这里设置后，画布内部就是750×250像素的绘图区域，所有绘制操作（比如画矩形、路径）的坐标都是基于这个尺寸的。如果不手动设置，Canvas默认的绘图分辨率是300×150像素。
  这是保证绘图清晰、不模糊的核心步骤，也是设置Canvas“真实绘图尺寸”的正确写法。

• canvas.style.width = "750px"; canvas.style.height = "250px";
  这是设置Canvas元素在页面上的显示大小，相当于把绘图缓冲区的像素拉伸或压缩到这个尺寸展示。如果只设置这个而不调整元素的width/height属性，就会把默认300×150的画布强行拉伸到750×250，导致绘制的图形边缘模糊、比例变形。

正确的使用姿势 #

如果要让Canvas绘图清晰且符合页面布局需求，建议同时设置两者：

1. 先通过元素属性设置绘图分辨率（保证绘图精度）；
2. 再通过CSS样式设置页面显示尺寸（适配布局，可根据需求缩放，比如要放大一倍显示就设为"1500px"）。

示例代码：

const canvas = document.querySelector('canvas');
// 设置绘图分辨率，核心步骤
canvas.width = 750;
canvas.height = 250;
// 设置页面显示尺寸，和绘图尺寸一致时图形不会变形
canvas.style.width = "750px";
canvas.style.height = "250px";

为什么不能只靠其中一种？ #

• 只设置CSS样式：绘图缓冲区还是默认的300×150，浏览器会把低分辨率的画布拉伸到指定尺寸，像素被强制放大，图形必然模糊。
• 只设置元素属性：Canvas会以绘图分辨率的实际像素大小显示在页面上，比如设置750×250后，元素在页面上就占750px×250px，但如果页面布局需要不同的大小，就会不符合需求。

内容的提问来源于stack exchange，提问作者LuisF