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 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规