红宝书 第15章整理——canvas

1、基本用法

使用<canvas>标签，注意这里有个关于canvas画布大小与元素大小的事情，之前有一篇博客说过

步骤：

首先创建<canvas>元素：

<canvas id="draw" width="200" height="200"></canvas>

再获取2D上下文对象：

var draw = document,getElementById("draw");

var context = draw.getContext("2d");

接下来主体就变成了context绘图对象，通过调用它的各种绘制函数进行画图

2、绘制

canvas可以绘制简单的矩形，以及填充颜色，描边，设置透明度，阴影，渐变。

清空区域，绘制直线，弧线，文本。

可以支持简单的变化：rotate旋转，scale缩放等等，注意不是动画！！！

除了自己绘制简单的图案，还支持呈现外部的图片。

在使用外部图片时可以在加载图片之后获取到该图片的data数据，是每一个像素的数据，红绿蓝+透明度。

也可以通过这种像素数据绘制图片，这样可以进行简单的图像处理，例如灰度之类的

3、WebGL（3D）