前端笔记——canvas

canvas

1. 首先需要明确，canvas有width/height属性，该属性可以确定canvas宽高，但是css设置的宽高才是最终宽高！！！
2. 根据width/css_width,height/css_height比例可以确定最后绘制的图形宽高
3. canvas是位图(标量图)，也就是和图片一样，只是像素点，当显示设备的像素比大于1，例如2，那么就是用2*2个像素的位置来显示一个像素！！！canvas画布占据多余的空间，所以才会显示模糊。
4. svg是矢量图，在设备像素比为2/3的时候，就是用一个像素点的空间来显示22/33的像素，也就很清晰了

			#ctx{
				width: 125px;
				height: 125px;
			}

			<canvas id="ctx" width="250px" height="250px"></canvas>

			var ctx=document.getElementById('ctx');
			var context=ctx.getContext('2d');
			context.fillStyle='rgb(0,0,220)'
			context.fillRect(0,0,20,10);
			context.font = "18px Georgia";
			// 4. 另外定位都是根据canvas位图的，所以y轴的100会随着倍数而变化，而18px此时也相当于9px
			context.fillText('我会模糊吗？',0,100);
			// 1. canvas:width 250px;height 250px ; css:width 500px height 250px
			// 由于宽度比例是2：1，高度是1：1，所以实际绘制的矩形宽度是40px 高度是10px
			// 可以看到，由于设置了css宽度为canvas宽度的两倍，所以宽度的文字部分模糊程度很大
			
			
			// 2.canvas:width 250px;height 250px ; css:width 250px height 250px
			// 此时实际宽高和canvas宽高一致，所以是 20px宽  高10px
			// 1:1之后，看起来清晰了一点，但是还是模糊
			
			// 3.在小程序中，导出分享海报会出现模糊的情况，这是因为canvas是位图，标量图
			// 导出的像素是按照位图的像素去导出，所以会模糊，因此需要先获取设备实际像素比
			// 然后导出的时候设置宽高*像素比，这样就不会模糊了
			// 此时设置canvas：width 250px,height 250px; css:width 125px height 125px
			// 由于此时canvas画布被压缩两倍，所以模糊问题解决了，也就是清晰了，但是字体变小了，位置也变了
			// 此时y=100,也就是50了，18px也就是9px了

5. 题目:<canvas width="250" height="250"></canvas>有个矩形长20px，高10px,CSS中width：250px height：500px，请问这个矩形渲染出来的实际面积（）
   由于css控制实际占据的空间，所以就是实际宽高为250 500,canvas画布宽高是250 250，也就是高度被拉伸了两倍，实际面积也就是20px*(10px*2)=400