html5中的canvas元素用于,html中的canvas元素用于

　　遇到的问题：画布元素变形的原因

　　一个DOM元素有三种大小：样式大小、html大小和css大小。

　　使用canvas元素时，canvas元素的默认宽度和高度是300px * 150px。这里的默认大小是html大小。

　　为了有助于更好的理解，以绘画为例。画板是css大小或者样式大小，画布是html大小。

　　如果我们不显示指定canvas元素的html大小，而是在css文件中指定它的css大小。结果很混乱。

　　比如我们在默认的300px * 150px的画布上画了一个圆半径为50px的圆。

　　HTML= zh head metacaraset= UTF-8 title canvas size/title tyle # canvas { width:200 px；高度：200px}/style/headbydiv canvas id= canvas /canvas/div script window . onload=function(){ const canvas=document . getelementbyid( canvas )；const CTX=canvas . get context( 2d )；CTX . begin path()；ctx.strokeStyle= # aaaaaactx.arc(100，100，50，0，2 *数学。PI)；CTX . stroke()；CTX . close path()；};/script/body/html最终显示的结果如下：

　　可以看出画布的尺寸确实是200 * 200。但是圆变成了椭圆，图形变形了。这是为什么呢？

　　如果去掉css设置的大小会怎么样？

　　可以看出此时图形是正常的。画布的大小确实是默认的300 * 150。

　　从比较和想象中，我们可以得出这样的结论：

　　起初，我们在300150的画布上画了一个圆。画好之后，我们希望把画布的大小改成200 200，画布保持原来的画布，不用更换。

　　可行的方法是拉伸画布。假设画布有弹性，一张画布从300 150拉伸到200 200。画布上圆的长半轴变成1.33倍，短半轴变成0.68倍。此时，圆自然是椭圆。

　　结论：

　　用canvas绘图时，为了避免不必要的麻烦，一定要记得为canvas元素设置html size的宽度和高度。

　　总结

　　以上是边肖对canvas元素的html大小和css大小对元素视觉的影响的简单介绍。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

　　如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。