canvas就像一张图片，如上面的例子就是一张300*300的图片，当你通过css设置宽度和高度时，就相当于你对一个图片进行了拉伸处理，如果设置的宽高比例和canvas本来的宽高比例不同的话，就会出现变形的情况。
因为通过css设置宽高只相当于对canvas进行缩放操作；所以我们可以通过js来修改canvas标签上的属性来达到我们想要的效果。
举个栗子：
刷新浏览器，正圆又回来了，大功告成~
使用双缓冲机制解决白屏。以下代码实现了双缓冲绘图机制：var container=document.getElementById("container")var realCanvas=document.createElement("canvas")realCanvas.width=container.clientWidth*2realCanvas.height=container.clientHeight*2realCanvas.style.width=container.clientWidth+"px"realCanvas.style.height=container.clientHeight+"px"container.appendChild(realCanvas)var cacheCanvas=document.createElement("canvas")cacheCanvas.width=container.clientWidth*2cacheCanvas.height=container.clientHeight*2var realContext=realCanvas.getContext("2d")var cacheContext=cacheCanvas.getContext("2d")cacheContext.fillRect(0,0,100,100)输入之后之后，一般的图形都不会在出现HTML5-canvas白屏的现象了。
