(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方法获取绘图环境之后。我们就可以使用各种"绘图工具"了,比如各种颜色,不同粗细等