首页 > 建站教程 > CSS3+HTML5 >  canvas getContext()方法正文

canvas getContext()方法

    一个画家要绘制一副画作,首先需要做一些准备工作。本人不懂绘画,大致猜测主要准备工作如下:
    (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方法获取绘图环境之后。我们就可以使用各种"绘图工具"了,比如各种颜色,不同粗细等