css将canvas缩放到适应屏幕大小

CSS是我们在前端开发中经常使用的一种语言，其作用是用来控制网页中的样式。在任何网页中，我们都可能用到Canvas元素，而使用CSS将Canvas缩放到适应屏幕大小则是我们经常会遇到的需求。

在此我们使用CSS3中的transform属性来完成Canvas缩放的任务，我们可以将transform应用在Canvas的父元素上。

canvas{
  width: 100%;
  height: 100%;
}

canvas-container{
  width: 80%;
  height: 80%;
  transform: scale(0.8);
}

以上代码中，我们首先将Canvas的宽度和高度设置为100%，以便让其占据整个父元素的大小。然后，我们创建一个名为canvas-container的父元素，将其宽度和高度设置为80%，并使用transform: scale(0.8)将其缩放到80%的大小。

这样，当我们在不同屏幕上打开网页时，Canvas的大小将保持适应屏幕的状态，不会出现被拉伸或者是赘余的情况，使用户能够获得更好的视觉体验。