Canvas在width和height发生变化时,会自动清空画布,这就意味着在改变尺寸时,Canvas上会有短暂的白屏时间。但有的情况下,我们希望改变canvas尺寸但又不希望有白屏,这时候可以采取给canvas的style赋值,也就是说canvas上有两套尺寸.
<canvas width="500" height="700" style="width: 300px;height:400px"></canvas>
style中的width和height是可以改变而不会引发画布清空的;而决定图片质量的是属性width和height,这两个属性任一发生变化就会引发画布清空。
总结就是,如果我们想改变canvas的大小而不触发画布清空,那就将canvas.width和canvas.height固定,使用canvas.style.width和canvas.style.height去调节大小。