您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

canvas 学习前提

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

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

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

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

<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
</head>
<body>
    <h1>这是</h1>
    <p>这是段落。</p>
</body>
</html>

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

是附属在上的,对进行设定的概念。

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

这里主要介绍两个所有都会有的。

下面这个例子中,我们给 <h1> 这个了 id 的,给它赋值为:“head”。

<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
</head>
<body>
    <h1 id="head">这是</h1>
    <p>这是段落。</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
</head>
<body>
    <h1 id="head">这是</h1>
    <p class="paragraph">这是第段落。</p>
    <p class="paragraph">这是第二个段落。</p>
</body>
</html>

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

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

我们看简单的例子:

<!DOCTYPE html>
<html>
<head>
< 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,可以查看网中相关的课程。

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


联系我
置顶