js学习之canvas的基础与应用(一)

                                                                 js学习之canvas的基础与应用(一)

    canvas中文可以理解为画布，我们可以在上面画出自己想要的图形。对于这个标签，大家在学习html5时就会了解到。在最初接触canvas会有很多的疑惑之类的，我自己也是这样的。当深入了解了之后，发现其并不是那样的难，那么接下来就从基础部分说起。

  首先这个标签的兼容性是非常好的，除了ie9一下的浏览器外，其余的都支持这个标签。我们在使用画布时，首先需要的就是在浏览器上的html上创建这样一个标签。由于是画布很显然的我们需要去设置它的宽高以便于我们能在上面画东西。创建好后我们还需要创建一个上下文对象才能对画布进行作画.getContext('2d')将其写在我们获取到的dom节点上即可开始。及下面的代码。

下面就来了解具体画的东西，线段，圆等

1.线段： ctx.move(x,y) 表示将画笔抬起移动到x,y这个像素点  ctx.lineTo(x,y) 画一条直线从起始点到此时的x,y这个像素点。ctx.stroke()对线段进行描边  ctx.lineWidth = 20 设置线段的宽度  ctx.closePath() 闭合当前的路径 ctx.strokeStyle = 'green' 表示所描边的颜色。下面就是一个实际的例子，上面也有代码的注释。

2.作画成矩形：ctx.rect(x,y,长,宽)  x与y表示作画矩形的左上角的顶点在使用这种方式时也要注意路径的问题  ctx.fillRect(x,y,长,宽）这表示自动填充这个矩形的内部颜色，默认情况下内部填充的颜色是黑色，采用这种方式时不需要注意路径的问题  ctx.strokeRect(x,y,长,宽),自动进行描边，这种方式不需要注意路径问题  ctx.clearRect(x,y,长,宽)表示擦除当前的矩形的区域。接下来就是这个实际例子的应用，上面也有具体的每种方式要注意的内容，在这里换用画布实现了矩形下落的这个动画效果。

3.弧角  arc(x,y,起始弧度,结束弧度,方向)  这里使用弧度时需要注意的是要使用Math.PI/180*n的形式来表示，方向用0和1来表示的，0表示顺时针 1表示逆时针 在这里尤其需要注意的是顺时针与逆时针结合的问题 例如角度是顺时针的90度，则表示的是1/4个圆 逆时针是3/4个圆。下面就是弧角的应用

4.圆角  arcTo(x1,y1x2,y2,r),确定好起始点x1与y1,结束点x2,y2以及半径r，下面就是圆角的应用

5.贝塞尔曲线  二次贝塞尔曲线 quadraticCurveTo(x1,y1,x2,y2)     有三个顶点A B C 规定从A到B 与从B到C的距离所需要的时间相等,此时开始计时，从A到B有个点，从B到C有个点，两点连线的切线形成的点就为二次贝塞尔曲线  三次贝塞尔曲线    bezierCurveTo(x1,y1,x2,y2,x3,y3) 三次贝塞尔曲线 有四个点，先形成两条直线，再形成一条直线，最后得到三次贝塞尔曲线。下面就是贝塞尔曲线的应用。

6.图案填充   createPattern(image,"repeat|no-repeat|repeat-x|repeat-y")   img元素 (Image对象) ，cacvas对象， video对象(有图像)，将这个image放入当前的画布当中，后面的属性表示当前image画布的填充方式。具体的应用如下，在这部分代码中需要注意的就是要等图片加载完成之后才能进行填充，因此在这里使用到了oImg.onload。

7.渐变        createLinearGradient(x1,y1,x2,y2) 线性渐变         首先需要定义好渐变的范围否则将不会有效果                                    createRadialGradient(x1,y1,x2,y2) 径向渐变        bg.addColorStop(p,color); 渐变颜色填充，其中p用小数表示，表示渐变颜色的范围的取值,color用字符串形式。下面就是渐变的代码实例

8.坐标轴转化  其主要是针对画布进行操作的   translate(dx,dy)重新映射画布上的位置，将画布的位置进行移动      scale(x,y) x y代表对当前画布进行缩放，x与y代表缩放的倍数     rotate(Math.PI/180 * n)将当前画布进行旋转     save() restore() 前面部分表示保存当前图像状态的一份拷贝 后者表示释放保存的状态，其是栈机制满足先进后出的方式因此在逐步释放的过程中，先释放后保存的    setTransform(a,b,c,d,e,f) 先重值再置换，即将之前设置好的效果都覆盖掉 a 水平缩放 b 水平倾斜 c 垂直倾斜 d 垂直缩放 e 水平移动 f 垂直移动