以下代码实现了双缓冲绘图机制：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白屏的现象了。
可以看出fillText实心文字先绘制，strokeText空心文字后绘制，他们坐标一致，所以直接覆盖可实心文字，形成了像文字内部描边通过text-shadow添加文字阴影可以形成对文字的外描边
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
可以看下这个文章，关于text-shadow
https://www.cnblogs.com/wuchuanlong/p/5985350.html
如果此时我在canvas上画一个圆，但是在浏览器上看到的效果却是个扁平的圆。为什么？
canvas就像一张图片，如上面的例子就是一张300*300的图片，当你通过css设置宽度和高度时，就相当于你对一个图片进行了拉伸处理，如果设置的宽高比例和canvas本来的宽高比例不同的话，就会出现变形的情况。
因为通过css设置宽高只相当于对canvas进行缩放操作；所以我们可以通过js来修改canvas标签上的属性来达到我们想要的效果。
举个栗子：
刷新浏览器，正圆又回来了，大功告成~
