一般來說桐玻，對于前端數(shù)據(jù)可視化工程師來說删窒，canvas 是個極好的工具闹蒜。
既能用 canvas 2d 調(diào)用 CanvasRenderingContext2D 的 api 來繪制各種圖表艺玲、圖形彤钟，這個主要依賴 cpu 來計算羞秤。也能用 canvas 3d webgl 來繪制各種圖形缸托、圖表，它主要依賴 gpu 來繪制各種圖形瘾蛋。
最近突然遇到一個問題是俐镐，我有一個 canvas 元素，我想每次出來都讓他自適應(yīng)屏幕可視區(qū)域的大小哺哼。
我第一反應(yīng)就是佩抹，直接設(shè)置 css 屬性 width: 100%; height: 100% ，但是馬上就被我自己給否決了取董。
因為出于以往的經(jīng)驗來說棍苹，在 canvas 元素上用設(shè)置 100% 這種參數(shù)，應(yīng)該是達不到這種效果的茵汰。
為了驗證我的猜想枢里，于是我開始寫代碼驗證了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
border: 0;
}
html,
body {
height: 100%;
}
</style>
</head>
<body>
<script>
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.style.width = 100 + '%';
canvas.style.height = 100 + '%';
canvas.style.background = '#aaa';
</script>
</body>
</html>
果然不出所料，可以是可以蹂午，但是會出現(xiàn)側(cè)邊滾動條栏豺，這是為什么呢？為什么 div 就沒有這種全屏滾動條呢豆胸？
帶著這種懷疑奥洼，我打開控制臺，看了一下晚胡，原來 canvas 元素的 style 屬性中的 display 為 inline灵奖，是不是因為這個原因?qū)е碌哪兀?/p>
看來碰到問題的時候伏尼，不能急于全盤否定，需要先測試一下尉尾，深究一番到底是什么原因?qū)е陆Y(jié)果與預想的不符爆阶。
知道原因了以后，那么我們就明白了沙咏，可以用哪些方式達到我們想要的效果了辨图。
但是需要注意的一點是，對于 canvas 來說肢藐，style 的 width 和 height 不等同于畫布的大小故河，畫布的大小是 HTMLCanvasElement.prototype.width 和 HTMLCanvasElement.prototype.height 這兩個屬性控制的，可以參考一下 html 標準中的這一段話：
The
[canvas](https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element)element has two attributes to control the size of the element's bitmap:widthandheight. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The[width](https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width)attribute defaults to 300, and the[height](https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-height)attribute defaults to 150.
也就是說吆豹，canvas.width 和 canvas.height 才是真正控制畫布大小的鱼的。
一般正常情況下，會將 canvas.width 和 canvas.height 大小調(diào)整到與 canvas.style.width 和 canvas.style.height 等大痘煤。
不然會導致如下圖所示的效果：
兩個圖的 canvas.width 和 canvas.height 屬性均為 100凑阶，但是由于 canvas.style.width 和 canvas.style.height 屬性不同，導致一張圖呈現(xiàn)被拉伸的模糊的效果衷快，一般情況下宙橱，我們不希望會出現(xiàn)這樣的效果。
所以接下來蘸拔，我會總結(jié)一下师郑，如果想要將 canvas 畫布設(shè)置為適配瀏覽器窗口大小，需要幾個步驟：
- 選擇一種將 canvas 元素適配窗口的方案调窍，無論是百分比宝冕、 vw 等 css 方法，還是采用 js 獲取窗口尺寸再調(diào)整的方法邓萨，請注意一定要調(diào)整下 canvas 元素的 display 屬性或者將父元素的 overflow 設(shè)置為 hidden地梨，否則會出現(xiàn)滾動條。
- 將 canvas.width 和 canvas.height 設(shè)置為與其樣式尺寸等大先誉。
- 開始編程吧湿刽。
