canvas getContext()方法

2018-9-28 12:38| 作者: admin| 查看: 7039| 评论: 0|来自: 蚂蚁部落

一个画家要绘制一副画作,首先需要做一些准备工作。

本人不懂绘画,大致猜测主要准备工作如下:

(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(上下文)构成。

由此可以猜测此方法的功能是获取绘图上下文环境,通俗的讲,就是为canvas绘图提供绘图的一些必要条件。

如果说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()一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部