canvas总结：绘图表面大小和元素大小_canvas 宽度与图像元素宽度-CSDN博客

本文讲解了HTML5 Canvas中绘图表面与元素尺寸的概念及它们之间的关系。介绍默认尺寸、如何通过HTML属性与CSS设置尺寸，并展示了不同尺寸设置下图形显示效果的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas总结：绘图表面大小和元素大小

1.默认大小
	如果不设置canvas大小，浏览器默认的大小是300*150.
	我们可以通过canvas属性设置w、h：
		<canvas id="canvas" width="600" height="300"></canvas>
	
	也可以通过css设置canvas大小：
		 #canvas {
            width: 800px;
            height: 400px;
        }

2.使用canvas画图
	html:(如果设置了宽高，等于设置了元素尺寸和绘图尺寸)
		<canvas id="canvas"></canvas>
		<canvas id="canvas" width="800" height="400"></canvas>
	css:(设置一个线宽为4，800*400的实线框，是一个元素尺寸，而绘图尺寸没有变)
		 #canvas {
            margin: 20px 0 0 40px;
            border: 4px solid #333;
            width: 800px;
            height: 400px;
        }
     js:(从40,30的坐标画一个线宽5，颜色蓝色的200*100的线框)
     	const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = '5px';
        ctx.strokeStyle = 'blue'; // 设置描边颜色
        ctx.strokeRect(40,30,200,100);
	如果元素尺寸大小和绘图尺寸大小相等不会出现图被缩放或者扩大的现象，但是如果两个尺寸大小不一致，浏览器就会自动进行缩放，使之适应canvas的元素尺寸
	缩放的比例是根据css的元素大小和绘图尺寸大小进行换算的：
		如果元素大小为600*300，绘图大小为300*150，那么实际图形会扩大2倍
		
详细：https://zhuanlan.zhihu.com/p/67575795