Canvas的默認寬高爲寬300px
,高150px
。
(因爲邊框的原因,寬高都多了2)
先畫一條簡單的線:
<!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">
<style>
.canvas{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id='myCanvas' class="canvas"></canvas>
<script>
const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
</script>
</body>
</html>
如果想修改畫布的寬高可以這樣做:<canvas id='myCanvas' class="canvas" width='100px' height="100px"></canvas>
不過一直以來,我們都是在CSS中修改寬高,如果在CSS中修改寬高會怎麼樣呢?
這就是修改後的結果,可以看到圖像變形了,這是爲什麼呢?
分別輸出畫布的高和寬,發現它的寬高並沒有發生改變。
實際上,畫布的寬高確實沒有變化,先是在畫布上畫出了直線,然後再將畫布縮放到在CSS中制定的寬高值。