H5 canvas 基础一

HTML5 canvas画布

canvas是什么

H5里面的一个标签，作为一个标签，他就像是一幅画布，等待着你来作画。可以说，他只是一个容器而已，需要配合着JavaScript来进行绘制。

创建canvas元素

创建了一个canvas元素，并规定了元素的id，宽度和高度。

注意： 创建标签，画布的大小在标签上设置，如果在css设置，设置的是这个标签的大小，而不是画布的大小。

通过 JavaScript 来绘制

canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成：
画个矩形：

理解坐标

上面的fillRect方法拥有参数(10,10,100,100)；
意思是：在画布上从左上角开始 (10,10)，绘制一个 100x100 的矩形。

getContext()

getContext() 方法返回一个用于在画布上绘图的环境。
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
画个三角形

得到一下图形

然后闭合图形

画个圆形

arc() 方法创建弧/曲线（用于创建圆或部分圆）
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
JavaScript 语法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
渐变

context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
插入图片

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）
基础的就到这里了，以后再慢慢写。