canvas有什么用_什么是Canvas？

什么是Canvas？

canvas是HTML5提供的一种新标签。

canvas 的意思是“画布”。画布是一个矩形区域，您可以控制其每一像素。

用于图形的绘制，也可用于创建图片特效和动画。通过脚本(JavaScipt)来完成。

Canvas 可以用来做些什么呢？

常规的一些图形和文字效果(当然也可以用CSS3来实现)，比如：纯色矩形、渐变矩形、彩色矩形、彩色文字等

粒子动画

摩字官网背景粒子效果

‍

canvas 3D万花筒效果

3D图片特效

3D图片特效

Canvas 的案例

案例1：生命之下，想象之上

出品：腾讯互动娱乐

案例1：外星人入侵地球竟是为了…

出品：天猫

Canvas 基础教程

1.创建一个画布

• 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小

2.使用 JavaScript 来绘制图像

• canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

• getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3.Canvas 坐标

• 是一个二维网络，左上角坐标为(0,0)

4.Canvas 路径

1、绘制线条

• moveTo(x,y) 定义线条开始坐标

• lineTo(x,y) 定义线条结束坐标

2、绘制圆形

• arc(x,y,r,start,stop)

5.Canvas 文本

• font - 定义字体

• fillText(text,x,y) - 在 canvas 上绘制实心的文本

• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

6.Canvas 渐变

• createLinearGradient(x,y,x1,y1) - 创建线条渐变

• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

7.Canvas 图像

• 把一幅图像放置到画布上

8.打造高大上的粒子动画

1、绘制粒子轮廓图

• 创建一个元素，并获取Canvas画布渲染上下文

• 使用canvas的图像操作API绘制图像

• 

• 获取图像的像素信息，并根据像素信息重新绘制出粒子效果轮廓图

2、制作粒子动画

• 要让粒子效果比较明显，那就不能让动画效果执行太过整体，需要让图案上每个粒子有不同的时间间隔启动。根据一定的规律交错的执行动画。这里的粒子启动间隔有两种，一种是每一行粒子执行时间间隔，要让每一行的粒子启动时间有规律错开；另外一种是每一行粒子之间启动时间随机的错开，这样执行的粒子动画才会有一种层次感和每个粒子有独立动画的颗粒感。

该粒子动画是怎么实现的呢？

其实是用了一张logo图片,如下图：

细心观察就会发现粒子动画其实是有差异的。通过设置不一样的缓动函数，是可以展示不一样的粒子效果。这也是Canvas的神奇之处。

canvas的用途还很广泛，还可以做各种动态效果、小游戏、3D特效等等。

在这里只是简单的介绍一下常见的动画效果和基本用法。