本篇主要關(guān)注css尺寸和元素尺寸
通過(guò)兩個(gè)Demo實(shí)驗(yàn)，我們:
解決了一個(gè)問(wèn)題: 由誰(shuí)決定元素的顯示大小
提出另一個(gè)問(wèn)題: 為什么會(huì)變形?
1. 通過(guò)一個(gè)實(shí)驗(yàn)了解canvas元素尺寸與css尺寸之間的關(guān)系:
1. 沒(méi)有指定尺寸: (紅色)
<canvas style="border: 1px solid red">
2. 指定元素尺寸不指定css尺寸(綠色) :
<canvas width="200" height="400" style="border: 1px solid green">
3. 同時(shí)指定元素尺寸和css尺寸(藍(lán)色):
<canvas style="border: 1px solid blue;width:150px;height:150px" width="200" height="400"></canvas>
canvas_size_demo.png
結(jié)論(chrome/firefox/ie11/edge/opera):
| 顯示結(jié)果 | elem size | css size |
|---|---|---|
| red: [300,150] | no | no |
| green: elem size決定 | yes | no |
| blue: 由css size決定 | yes | yes |
2. 第二個(gè)實(shí)驗(yàn):
先強(qiáng)調(diào)如下要點(diǎn)：
- css 的width/height 必須帶px/cm等單位
- 元素的width/height 的單位只能是px，所以可以不寫(xiě)單位
測(cè)試代碼如下(注意:只指定了css尺寸，沒(méi)指定elem尺寸):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨風(fēng)而行之青衫磊落險(xiǎn)峰行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>
你會(huì)發(fā)現(xiàn)如下事實(shí):
嚴(yán)重形變.png
- 沒(méi)有指定elem size,elm size 缺省值= [300,150] (上表結(jié)論，此處證實(shí))
- 元素顯示的區(qū)域大小由css size決定，顯示區(qū)=[300px,500px]
- css size必須帶單位，而elem size不用帶單位，因?yàn)橐欢ㄊ窍袼乇硎?大家可以做個(gè)實(shí)驗(yàn)，修改elem size.width = 100px/cm后，alert的結(jié)果和顯示的效果可以證實(shí): 不管帶單位與否，或者單位是px還是cm...，dom都解釋為像素表示?。?！)
- 渲染內(nèi)容發(fā)生了嚴(yán)重的形變,這個(gè)才是我們需要了解的重點(diǎn)內(nèi)容！??！
通過(guò)上述兩個(gè)實(shí)驗(yàn)，我們:
解決了一個(gè)問(wèn)題: 由誰(shuí)決定元素的顯示大小！
提出另一個(gè)問(wèn)題: 為什么會(huì)變形?
下一篇，就了解為什么會(huì)變形以及盡量避免這個(gè)問(wèn)題。涉及圖形學(xué)背后的一些原理，還是蠻好玩的(例如渲染表面，后備緩沖區(qū)，位塊傳輸?shù)鹊?。
如果感覺(jué)有興趣，請(qǐng)毫不猶豫的給我點(diǎn)個(gè)贊.
忍不住show一下我的超帥裝備:
兩樹(shù)莓派套裝.jpg
1. 樹(shù)莓派3B操作系統(tǒng)的安裝(視頻)
我錄的樹(shù)莓派安裝視頻，有興趣的同學(xué)可以看看。很好玩的東西。我主要用來(lái)玩linux編程，也玩玩gpio編程。以后會(huì)多拍點(diǎn)樹(shù)莓派視頻。
