Canvas是HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。 <canvas>标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像，创建动画甚至实时视频处理与渲染。

默认情况下，<canvas> 没有边框和内容。默认是一个 300150 的画布，所以我们创建了 <canvas> 之后要对其设置宽高。 我们可以通过html属性‘width’，‘height’来设置canvas的宽高，不可以通过 css 属性来设置宽高。因为通过 css 属性设置的宽高会使 canvas 内的图像按照 300150 时的比例放大或缩小。

在web开发中经常要绘制一些页面图形效果，当然这可以直接作图然后嵌入页面，当然也可以采用Canvas来绘制，Canvas是HTML5新增的组件，它就像一块幕布，比如绘制路径、盒、圆、字符以及添加图像等。没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。

通过上面的讲述，我们不难看出HTML5的新元素Canvas的重要性及其功能的强大，因此，本站推出了全新课程—HTML5 Canvas视频教程，下面是该课程的课程目录，我们先来一睹为快。

第一章 canvas概述

 1-1 什么是canvas   (00:29)

 1-2 浏览器支持   (00:10)

第二章 canvas案例

 2-1 创建一个画布   (03:13)

 2-2 绘制矩形方式一   (10:26)

 2-3 绘制矩形方式二   (06:40)

 2-4 绘制矩形综合案例   (07:16)

 2-5 绘制圆形   (08:43)

 2-6 绘制圆形综合案例   (09:54)

 2-7 贝塞尔曲线   (06:32)

 2-8 绘制文字   (10:24)

 2-9 实现渐变   (13:11)

 2-10 清除画布   (04:42)

 2-11 运动反弹   (15:31)

 2-12 画板中的绘画效果   (16:25)

 2-13 画板中的清除效果   (05:02)

 2-14 画板中的重绘效果   (02:18)

 2-15 图形组合   (09:57)

 2-16 阴影属性   (05:35)

 2-17 绘制图像   (19:07)

 2-18 图像平铺与图像剪切   (07:39)

结合上面的课程目录，我们不难发现，本站的课程更看重实际动手能力，通过大量的canvas案例，帮助我们快速掌握canvas的应用，并且更加注重实战编程思维的培养，为学习者提供一个流畅的学习思路。

Canvas作为HTML的新元素，canvas是一个功能非常强大的画板，兼之能够创建动画甚至实时视频处理与渲染，实在是我们实现技术跨越的一个阶梯。本课程更是由10年以上软件研发及管理经验，先后担任高级软件工程师、项目主管的菲菲老师亲自为我们讲解，只要我们按照老师的要求，学习完整个课程，何愁学不好HTML的新元素Canvas呢？快来本站的HTML视频教程学习这门课程吧！