闲聊js5: 创建一个演示用的渲染库3(尺寸这些事)

本篇主要关注css尺寸和元素尺寸
通过两个Demo实验，我们:
解决了一个问题: 由谁决定元素的显示大小
提出另一个问题: 为什么会变形?

---

1. 通过一个实验了解canvas元素尺寸与css尺寸之间的关系:

1. 没有指定尺寸: (红色) 
    

2. 指定元素尺寸不指定css尺寸(绿色) : 
    

3. 同时指定元素尺寸和css尺寸(蓝色): 
   

canvas_size_demo.png

结论(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尺寸):

    
    
    




    你的浏览器还不支持哦

    

你会发现如下事实:

严重形变.png

• 没有指定elem size,elm size 缺省值= [300,150] (上表结论，此处证实)
• 元素显示的区域大小由css size决定，显示区=[300px,500px]
• css size必须带单位，而elem size不用带单位，因为一定是像素表示(大家可以做个实验，修改elem size.width = 100px/cm后，alert的结果和显示的效果可以证实: 不管带单位与否，或者单位是px还是cm...，dom都解释为像素表示！！！)
• 渲染内容发生了严重的形变,这个才是我们需要了解的重点内容！！！

通过上述两个实验，我们:

解决了一个问题: 由谁决定元素的显示大小！

提出另一个问题: 为什么会变形?

下一篇，就了解为什么会变形以及尽量避免这个问题。涉及图形学背后的一些原理，还是蛮好玩的(例如渲染表面，后备缓冲区，位块传输等等)。

如果感觉有兴趣，请毫不犹豫的给我点个赞.

忍不住show一下我的超帅装备:

两树莓派套装.jpg

1. 树莓派3B操作系统的安装(视频)

我录的树莓派安装视频，有兴趣的同学可以看看。很好玩的东西。我主要用来玩linux编程，也玩玩gpio编程。以后会多拍点树莓派视频。