canvas 学习前提

1. 前言

canvas 属于前端知识，但是学习 canvas 也是需要一些基础的，今天我们就回顾一下学习 canvas 前需要掌握的内容。掌握内容主要分为两部分，分别是：

什么是 HTML？
什么是 JavaScript？

下面我们就简单回顾一下这两个知识点。

2. HTML 基本知识简单回顾

HTML 是一种超文本标记语言（英语：HyperText Markup Language，简称：HTML），它是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。

我们来看一个最简单的 HTML 实例：

2.1 HTML 标签

我们平时看到的 WEB 页面都是由标签嵌套构成的，它们包含在一对尖括号中，例如上面的 <html>、<body> 或者是 <h1>，当然还有我们后面会用到 <canvas> 这个标签，本套课程我们主要围绕 <canvas> 这个标签展开讲解。

2.2 属性

属性是附属在标签上的，对标签进行设定的一个概念。

大多数标签的属性以“名称 = 值”的形式成对出现，由 “=” 分离并写在开始标签元素名之后。值一般由单引号或双引号包围，有些值的内容包含特定字符，在 HTML 中可以去掉引号。

这里主要介绍两个所有标签都会有的属性。

id 属性为元素提供了在全文档内的唯一标识。需要注意的是，一个 HTML 文件中，不同标签的 id 值是不能重复的。

下面这个例子中，我们给 <h1> 这个标签添加了一个 id 的属性，给它赋值为：“head”。

class 属性提供一种将相似标签分类的方式。多个标签可以定义同样的 class 属性，class 经常被用作于设定 css 相关的样式。

下面这个例子中，我们给两个 <p> 标签都添加了一个 class 的属性，给它赋值为：“paragraph”。

3. JavaScript 的基本知识简单回顾

JavaScript 是一种解释型的编程语言，主要应用在 WEB 领域，当然更多应用场景我们这里不做讨论，本教程中，我们只需要知道 JavaScript 可以帮助我们绘制 canvas 画布即可。

JavaScript 代码不管是内嵌还是从外部引入，它都会包含在一个 <script> 的标签中。

我们看一个简单的例子：

运行上面代码，页面会弹出一个提示框，内容为： “慕课网IMOOC.COM”。

当然 JavaScript 不会只有这么点能力，后面我们对 canvas 的所有操作都会用到它，这里就不详细展开讲述了。想要系统学习 JavaScript，可以查看慕课网中相关的课程。

4. 总结

本小节教程主要讲解了学习 <canvas> 之前需要具备的知识。当然 HTML 和 JavaScript 不仅仅是上面讲的这一点内容，随便哪一个展开都是前端不可或缺的一块儿内容。想要走前端这条路的同学，还是需要认真地去学习这些内容。我们本套 <canvas> 课程用到的知识点都属于 HTML 和 JavaScript 的子内容，希望同学们能认真地去学习这块儿内容。