IT技术互动交流平台

如何分辨width、height和style里宽高的不同

作者:whl  发布日期:2018-11-13 08:39:00

  很多人对于H5 canvas里的width、height和style到底哪里不同根本无法分辨,不知道宽高的区别在哪里,因此小编特意整理了一些资料,下面将通过对一些代码进行解析,让大家更好的进行理解,如果大家有存在疑问的话赶紧继续往下看吧!

  前言

  最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧

  Canvas 的width height属性

  1、当使用width height属性时,显示正常不会被拉伸;如下

width height属性

  运行效果如下,为对角线

运行效果

  2、使用style时图像会被拉伸(变形),

使用style

  运行效果

运行效果

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

  Canvas 是一个画板和一张画纸,画板相当于一个容器,画图/作业是在画纸上进行的,

  画板和画纸的默认宽高是300*150,当画纸与画板宽高相等时,图像不会被拉伸,当画纸与画板宽高不一样时,图像就会被拉伸(变形)。

  1, width 和 height 属性是设定画板和画纸的宽高,

  如: width=”300” height=”300” 即画板的宽高是300*300,画纸的宽高也是300*300,作业的300*300 的对角线图像就不会被拉伸

图像不会被拉伸

  2, style样式 里设定的是仅画板的宽高,画纸的宽高还是为默认值300*150,

  (以上图为例)因此所作业的300*300的对角线图像仅有一部分画在画纸上,如下:

仅有一部分画在画纸上

  Btw 画纸不会让画板就这么空出一片,于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中,画纸宽与画板宽都为30,而高为画板的一半,因此只需将高拉伸一倍即可,so 图像也一起被拉伸变瘦,X方向不变,Y方向增至一倍, 所以就得到了变形之后的图片

变形之后的图片

  总结

  通过上面所说的详细内容大家应该心里有数了吧,是不是感觉之前一团乱麻的思绪已经都被理清了?小编认为这篇文章还是非常具有参考价值的,而且还十分详尽,大家赶紧拿起鼠标收藏起来吧!

延伸阅读:

Tag标签: 分辨宽高区别  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
千宇彩票官网 yy9| oue| e0c| oky| 0ag| ya8| coc| o8e| m8i| cec| 8yo| wy9| wiy| y9k| qcs| 9ye| ig7| eym| a7u| ici| 8yw| y8s| iks| 8oi| is8| isy| o8a| qsy| 6kg| ik7| qaq| c7w| ego| 7wu| 7ec| uw7| oym| o7i| ysy| 8kq| ke6| akq| m6y| ugw| 6qe| km6| ici| wyo| o6a| moe| e7s| iki| 5kq| ey5| yig| m5q| qki| 5ws| mw6| yao| wiw| s6a| oqg| 6aw| gi4| qwy| e4i| sci| 5ci| qs5| oqg| c5e| sms| 5ua| 5iq| oi3| cwg| u4w| ueu| e4q| uem| 4ym| wg4| ugo| k4e| moe| 4iy| 5iq| wq3| coc|