canvas指定的宽高写在行间和写在style里面的区别?

上代码,指定的canvas宽高都一样,线条的粗细都是5px 

1.宽:400;高:300;直接写在<canvas>里的效果:

 

2、删除<canvas>里的宽高,宽:400;高:300;写在<style>里的效果:

 但是从对比结果上来看,明显的线条粗细有差异。

写在style里的宽高出现的canvas它的外边有那种毛糙感,而写在行间的宽高样式出来的图却没有。

canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果(上面就出现了模糊)。所以,在canvas绘图时,应该在canvas标签里直接定义宽高

原文地址:https://www.cnblogs.com/xiaqilin/p/6841661.html