CSS 與 canvas 屬性設定畫布尺寸

admin發表於2018-10-17
CSSCanvas

繪圖自然需要畫布，canvas 中的畫布由 <canvas> 元素提供。

根據繪製圖案大小的不同，可能需要調整畫布的尺寸以滿足實際需求。

預設狀態下，畫布尺寸300x150，單位是畫素。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = ()=> {
  let canvas = document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100,85,80,0,2*Math.PI);
  ctx.fillStyle = 'blue'
  ctx.fill();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/17/234531qoss5nhpa1ntlhgh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由於畫布過小，導致在其中繪製的圓形有部分內容無法顯示。

下面通過程式碼例項介紹一下設定畫布大小的兩種方式，以及產生的問題。

一.標籤 width和height設定畫布大小：

HTML中有不少標籤自身具有width和height屬性，可以設定尺寸。

<canvas>也具有width和height屬性，可以設定畫布大小。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = ()=> {
  let canvas = document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100,85,80,0,2*Math.PI);
  ctx.fillStyle = 'blue'
  ctx.fill();
}
</script>
</head>
<body>
  <canvas id="ant" width="200px" height="200px"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/17/234611t9gm9zop099yqqmy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

調整畫布大小之後，圓可以完全顯示出來。

可以看到，標籤自身的width和height屬性設定畫布尺寸是可行的。

二.CSS設定畫布大小：

下面使用CSS width 與 height 屬性替代標籤自身屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  width:200px;
  height:200px;
  border:1px solid red;
} 
</style>  
<script>
window.onload = ()=> {
  let canvas = document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100,85,80,0,2*Math.PI);
  ctx.fillStyle = 'blue'
  ctx.fill();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/17/234650ajkdkcnzc51fn58w.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

最終的展現效果有點讓人吃驚，非但圖案沒有完全展示出來，而且變成了一個"蛋"。

從上面的圖案展現形式可以有如下疑問：

（1）.CSS修改的可能不是畫布大小，如果畫布大小變成200x200，完全可以容納此圖案。

（2）.從紅色邊框看，canvas的尺寸的確變成200x200。

分析如下：

標籤自身的width與height屬性確實是設定畫布的尺寸，正確的設定方式。

再來分析CSS設定canvas的尺寸，大家知道<canvas>標籤最終會被瀏覽器渲染為一張真正的圖片。

CSS真正設定的是生成圖片的尺寸，於是上述程式碼的解析過程大致可以認為如下：

（1）.<canvas>標籤預設尺寸是300x150，圓形無法完全顯示。

（2）.在渲染過程中，首先生成一張300x150尺寸圖片。

（3）.然後在通過CSS將此圖片尺寸設定為200x200，於是出現了拉伸變形現象。

相關文章