HTML5 Canvas(中/英)

从像素到动画!

初级

大约 2 个星期

6小时每周 (自主学习)

加入成千上万的全球学员

开始免费课程

加入课程
免费
可享受
课程视频
实战练习与参考项目指导
初级

大约 2 个星期

6小时每周 (自主学习)

加入成千上万的全球学员

课程概述

Canvas 是一种 HTML5 元素,使你能够在通过 JavaScript 控制的网页中添加可绘制的图层。Canvas 的功能非常强大,可用于合成图片,甚至创作游戏。

在本课程中,你将通过几个示例项目学习如何使用 Canvas;如何使用形状、图片和文字进行创作;如何在图片上制造效果以及如何创建动画。此课程提供中文版本。

喜欢这门课程?你可以继续学习“前端开发工程师”纳米学位!

为什么学习这门课程?

如果你想学习比静态 HTML 标记内容更高级的知识,并提高自己的 JavaScript 技能,从而制作交互式和吸引人的体验,那么你应该学习本课程。也许你想要开始制作游戏或复杂的动画,想要创建在视觉上令人震撼的作品,例如信息图,或者也许只是想制作流行图片,Canvas 都能帮到你。

先修要求

要顺利学完本课程,你应该具备一些 HTML 和 JavaScript 经验。你至少应该理解循环、函数和条件语句 (if/else)。

优达学城的 JavaScript 基础HTML 和 CSS 入门 可以帮助你为学习本课程做好准备。

查看使用优达学城的技术要求

你将学习什么内容?

项目

经典街机游戏克隆

我们会向你提供视觉素材和游戏循环引擎;你必须使用这些工具向游戏中添加一系列实体,包括玩家角色和敌人,从而重现经典街机游戏 Frogger。

学习计划

你将学习 Canvas 2D API 的工作原理,以及如何使用它来创建有趣的应用。在每个示例项目中,你都会接触到 HTML5 Canvas 的不同功能,并运用这些功能创建你自己的应用。

第 1 课:HTML5 Canvas 基础知识

在这课中,我们将讨论什么是 Canvas,它会如何影响到浏览器中的图形,以及它的强大之处。我们在学习该 API 的时候,将使用文字和图片(例如流行图片)合成内容。

第 2 课:从像素到动画

在这节课中,我们将学习如何根据 Canvas2D 上下文判断图片的存储方式,如何通过运用各种效果和过滤器在像素级别修改图片,以及如何创建动画。

讲师与合作伙伴

Cameron Pittman

Cameron Pittman

Cameron 是一位充满激情的教育工作者和程序员,非常热爱网页开发。他专门为优达学城创建编程类课程。来此之前,他曾是西雅图创业公司 LearnBIG 的内容主管和网页开发者。他在田纳西州纳什维尔的一所高中教了四年课程,主要教物理和化学。在此期间,他率先利用视频游戏“传送门 2 (Portal 2)”来讲述物理知识。Cameron 荣获了范德堡大学物理和天文学本科学位,并获得贝尔蒙特大学的教育学硕士学位。

James Williams

James Williams

一次在计算机夏令营当讲师的经历,让 James Williams 爱上教学工作。他在闲暇时间还参加障碍赛或越野赛,同时他还是《HTML5 游戏编程》的作者,这本书被翻译成了中文和韩文。他拥有计算机科学的本科和硕士学位,以及法语的本科学位。

官方微信公众号二维码

优达学城(Udacity)微信