（1）.作画的纸张，可以类比canvas中的画布。
（2）.画笔与不同颜色染料等一大堆东西。
canvas绘图与实际绘图非常相似，真正绘制图案前，也需要做一些准备工作。
一.获取画布：
let canvas = document.getElementById("ant");
上面代码获取id属性值为"ant"的canvas元素对象，也就是获取画布。二.获取绘图环境：
现在仅有一张画纸铺在桌案上，绘图的工具一无所有。
总不能徒手绘画吧，当然也可能有这样的奇葩大神，咱们这里只以常理推论。
现在本文主角getContext方法的功能得以体现。
let canvas = document.getElementById("ant");
let ctx = canvas.getContext("2d");
getContext由get（获取）+context（上下文）构成。由此可以猜测此方法的功能是获取绘图上下文环境，通俗的讲，就是为canvas绘图提供绘图的一些必要条件。
如果说document.getElementById("ant")方法是在桌案上铺上画纸，那么getContext方法就是在桌案上摆上画笔、染料等等瓶瓶罐罐的绘图必须的工具，那么，这样一个绘图所必须的环境就形成了，然后可以开始你的操作。
特别说明：getContext方法参数是"2d"，表示绘制2D图案，可能随着版本的更新，还会新增其他参数。
三.代码实例如下：
<!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>
代码运行效果截图如下：
上面代码绘制了一条简单的垂直线，通过getContext方法获取绘图环境之后。我们就可以使用各种"绘图工具"了，比如各种颜色，不同粗细等
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！