本篇主要關注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都解釋為像素表示?。?！)
- 渲染內容發生了嚴重的形變,這個才是我們需要了解的重點內容?。。?/strong>
通過上述兩個實驗，我們:
解決了一個問題: 由誰決定元素的顯示大??！
提出另一個問題: 為什么會變形?
下一篇，就了解為什么會變形以及盡量避免這個問題。涉及圖形學背后的一些原理，還是蠻好玩的(例如渲染表面，后備緩沖區，位塊傳輸等等)。
如果感覺有興趣，請毫不猶豫的給我點個贊.
忍不住show一下我的超帥裝備:
兩樹莓派套裝.jpg
我錄的樹莓派安裝視頻，有興趣的同學可以看看。很好玩的東西。我主要用來玩linux編程，也玩玩gpio編程。以后會多拍點樹莓派視頻。
