div.style.width,css width 宽度适应内容

　　前言

　　最近在学习canvas的属性时遇到了一个小问题，就是canvas的宽度和高度，最后通过查相关资料解决了这个问题。所以，下面我就和大家分享一下解决的过程。在这里我没有太多的话要说。我们来看看详细的介绍。

　　Canvas 的width height属性

　　1.当使用width height属性时，显示将不会正常拉伸；如下

　　Canvas ID= my canvas width= 300 height= 300 浏览器不支持canvas，请升级或使用其他浏览器！/canvasscript type= text/JavaScript var canvas=document . getelementbyid( my canvas )，CTX=canvas . get context( 2d )；ctx.moveTo(0，0)；ctx.lineTo(300，150)；CTX . stroke()；/script对角运行，如下所示

　　2.使用style时，图像会被拉伸(变形)，

　　style # my canvas { width:150 px；高度：150px}/风格运行效果

　　如何理解？？？可以这么理解————

　　画布就是一个画板，一张画纸。画板相当于一个容器，在画纸上画图/作业。

　　画板和画纸的默认宽度和高度为300*150。当画纸和画板的宽度和高度相等时，图像不会被拉伸，但当画纸和画板的宽度和高度不同时，图像会被拉伸(变形)。

　　1.宽度和高度属性用于设置画板和画纸的宽度和高度。

　　比如：width="300" height="300 "，即画板的宽度和高度都是300*300，画纸的宽度和高度也是300*300，所以作业的300*300对角线图像不会被拉伸。

　　2.画板的宽度和高度只在样式style中设置，画纸的宽度和高度仍然是默认值300*150。

　　(上图为例)因此，在图纸上只画了作业300*300对角线图像的一部分，如下图：

　　Btw画纸不会让画板变空，所以画纸连同图像会被拉伸到和画板一样的大小。在这个例子中，画纸的宽度和画板的宽度都是30，高度是画板的一半，所以只需要拉伸两次高度，so图像也一起拉伸细化，X方向不变，Y方向加倍，就得到变形的图像。

　　引用////html5/643939.html中的摘要

　　HTML5中画布的宽度和高度设置

　　默认情况下，Canvas元素宽300像素，高150像素。要设置它的宽度和高度，可以使用以下方法(它不会被拉伸):

　　方法1:

　　画布宽度=500 高度= 500 /画布

　　方法二：使用HTML5 Canvas API操作OK

　　var canvas=document . getelementbyid(操作画布的ID )；

　　画布.宽度=500；

　　如果通过以下方法设置宽度和高度，画布元素将从原始大小拉伸到设置的宽度和高度：

　　方法一：CSS会被拉伸。

　　#要操作的画布的ID {

　　宽度：1000px

　　高度：1000px

　　}

　　方法二：使用HTML5 Canvas API的操作会被拉伸。

　　var canvas=document . getelementbyid(操作画布的ID )；

　　canvas . style . width= 1000 px ；

　　canvas . style . height= 1000 px ；

　　方法3:使用$(#id )。jquery的宽度(500)；会被拉长。

　　其他：画布的宽度和高度不能用百分比表示。Canvas将百分比值显示为数值。

　　总结

　　这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。

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

相关文章阅读