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

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


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

1. 没有指定尺寸: (红色) 
    <canvas  style="border: 1px solid red">

2. 指定元素尺寸不指定css尺寸(绿色) : 
    <canvas width="200" height="400" style="border: 1px solid green">

3. 同时指定元素尺寸和css尺寸(蓝色): 
   <canvas style="border: 1px solid blue;width:150px;height:150px" width="200" height="400"></canvas>
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尺寸):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>随风而行之青衫磊落险峰行JSDemo-RenderSurface</title>
    <script src="BLFES6Lib.js"></script>
</head>

<body>

    <canvas id="myCanvas" style="border: 1px solid blue;width:300px;height:500px">你的浏览器还不支持哦</canvas>

    <script>
        "use strict";
        let canvas = document.getElementById("myCanvas");
        let context = canvas.getContext('2d');
        let render = new BLFRender(context);
        let rect = new BLFRectSprite();
        rect.render(render);

        alert("1. elm size = [" + canvas.width + "," + canvas.height + "]");
        alert("2. css size = [" + canvas.style.width + "," + canvas.style.height + "]");
    </script>
</body>

</html>

你会发现如下事实:


严重形变.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编程。以后会多拍点树莓派视频。

推荐阅读更多精彩内容