JS学习：创建一个演示用的渲染库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>
结论(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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>你会发现如下事实:
- 没有指定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编程。以后会多拍点树莓派视频。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦