本篇主要关注css尺寸和元素尺寸
通过两个Demo实验，我们:
解决了一个问题: 由谁决定元素的显示大小
提出另一个问题: 为什么会变形?
1. 通过一个实验了解canvas元素尺寸与css尺寸之间的关系:
1. 没有指定尺寸: (红色)
结论(chrome/firefox/ie11/edge/opera):
| 显示结果 | elem size | css size |
|---|---|---|
| red: [300,150] | no | no |
| green: elem size决定 | yes | no |
| blue: 由css size决定 | yes | yes |
2. 第二个实验:
先强调如下要点：
-
css 的width/height 必须带px/cm等单位
- 元素的width/height 的单位只能是px，所以可以不写单位
测试代码如下(注意:只指定了css尺寸，没指定elem尺寸):
随风而行之青衫磊落险峰行JSDemo-RenderSurface
你会发现如下事实:
- 没有指定elem size,elm size 缺省值= [300,150] (上表结论，此处证实)
- 元素显示的区域大小由css size决定，显示区=[300px,500px]
- css size必须带单位，而elem size不用带单位，因为一定是像素表示(大家可以做个实验，修改elem size.width = 100px/cm后，alert的结果和显示的效果可以证实: 不管带单位与否，或者单位是px还是cm...，dom都解释为像素表示！！！)
- 渲染内容发生了严重的形变,这个才是我们需要了解的重点内容！！！
通过上述两个实验，我们:
解决了一个问题: 由谁决定元素的显示大小！
提出另一个问题: 为什么会变形?
下一篇，就了解为什么会变形以及尽量避免这个问题。涉及图形学背后的一些原理，还是蛮好玩的(例如渲染表面，后备缓冲区，位块传输等等)。
如果感觉有兴趣，请毫不犹豫的给我点个赞.
忍不住show一下我的超帅装备:
我录的树莓派安装视频，有兴趣的同学可以看看。很好玩的东西。我主要用来玩linux编程，也玩玩gpio编程。以后会多拍点树莓派视频。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4741/viewspace-2799206/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
