canvas 学习前提

1. 前言

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

  1. 什么是 HTML?
  2. 什么是 JavaScript?

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

2. HTML 基本知识简单回顾

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

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

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

2.1 HTML 标签

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

2.2 属性

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

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

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

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

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

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
    <h1 id="head">这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果
  • class 属性提供一种将相似标签分类的方式。多个标签可以定义同样的 class 属性,class 经常被用作于设定 css 相关的样式。

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

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
    <h1 id="head">这是一个标题</h1>
    <p class="paragraph">这是第一个段落。</p>
    <p class="paragraph">这是第二个段落。</p>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

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

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

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

我们看一个简单的例子:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
    <h1 id="head">这是一个标题</h1>
    <p class="paragraph">这是第一个段落。</p>
    <p class="paragraph">这是第二个段落。</p>
    <script>
    	alert("慕课网IMOOC.COM")
    </script>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

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

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

4. 总结

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