CSS 與 canvas 屬性設定畫布尺寸

admin發表於2018-10-17

繪圖自然需要畫布,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,於是出現了拉伸變形現象。

相關文章