canvas getContext()

admin發表於2018-09-28
CanvasContext

一個畫家要繪製一副畫作，首先需要做一些準備工作。

本人不懂繪畫，猜測大致主要準備工作如下：

（1）.作畫的紙張，可以類比canvas中的畫布。

（2）.畫筆與不同顏色染料等一大堆東西。

canvas 繪圖與實際繪圖非常相似，繪製圖案前，也需要做一些準備工作。

一.獲取畫布：

[JavaScript] 純文字檢視 複製程式碼
let canvas = document.getElementById("ant");

上面程式碼獲取id屬性值為"ant"的canvas元素物件，也就是獲取畫布。

二.獲取繪圖環境：

現在僅有一張畫紙鋪在桌案上，繪圖的工具一無所有。

總不能徒手繪畫，當然也可能有這樣的奇葩大神，這裡只以常理推論。

現在本文主角getContext()方法的作用得以體現。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
let canvas = document.getElementById("ant");
let ctx = canvas.getContext("2d");

getContext由get（獲取）+context（上下文）構成。

由此可以猜測此方法的功能是獲取繪圖上下文環境，通俗的講，就是為繪圖提供一些必要條件。

如果說document.getElementById("ant")方法是在桌案上鋪上畫紙，那麼getContext()方法就是在桌案上擺上畫筆、染料等等瓶瓶罐罐的繪圖必須的工具，於是，這樣一個繪圖所必須的環境就形成了。

特別說明：getContext()方法引數是"2d"，表示繪製2D圖案，可能隨著版本的更新，會新增其他引數。

三.程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/28/124019hugp89u6o6z9f917.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼繪製了一條簡單的垂直線，通過getContext方法獲取繪圖環境之後。

我們就可以使用各種"繪圖工具"了，比如各種顏色的染料，不同粗細的筆等。

程式碼非常簡單，更多的知識可以閱讀下面相關文章。

相關閱讀：

（1）.lineWidth屬性參閱canvas lineWidth一章節。

（2）.strokeStyle屬性參閱canvas strokeStyle一章節。

（3）.beginPath方法參閱canvas beginPath()一章節。

（4）.moveTo方法參閱canvas moveTo()一章節。

（5）.lineTo方法參閱canvas lineTo()一章節。

（6）.stroke方法參閱canvas stroke()一章節。

相關文章