canvas小知识

canvas

概念1：Canvas内部有个图像

它是一个HTML5新增的绘制图像的标签，canvas 是一块画布，它在屏幕上占据一块区域，用来绘制图形。它必须有宽度和高度，因为实际上 它内部有一个图像 。（.bmp,.png那样的图像）。
和img标签非常像，但是img它不能控制绘制，而是准备好图，把它放到网页上。
style设置的宽高，是给谁设的？ ==>Canvas标签；
width，height属性设置的宽高==>canvas 内部的图像；

概念2：路径

路径是一个“我脑海中的打的草稿”，是一个形状。它并不绘制到我的屏幕上。
我的描边，或者填充它，他才能显示到我们的屏幕上。

比如说：
ctx.rect(x,y,w,h) //这个函数，画的就是路径
ctx.strokeRect(x,y,w,h) //这个函数，这个是直接画到图像上的；

canvas提供context中，有且只有一条路径。为了不让新的路径的绘制对老的路径绘制出来的图形产生影响，我们要记得ctx.beginPath(). closePath():是用来绘制路径的一个函数，就是为了把路径画成闭合的路径。
路径的样式设置：

描边的样式设置：
ctx.strokeStyle ='red' (描边的颜色，可以传css里面的颜色值)
ctx.lineWidth =5(描边的宽度，可以传数值)
ctx.fillStyle ='green'(填充的颜色)

概念3：快速绘制形状的函数

1.绘制矩形
2.绘制弧形（圆弧）
1.圆弧的概念：圆周的一部分，由起始角和结束角来截取
2.用“弧度”而非“角度”来表示起始角和结束角。
1.弧度 =角度 /180 *Math.PI
2.这个可以做成函数，方便使用
function deg2arc(deg){
var arc=deg/180 *Math.PI;
return arc;
}
3.arc(x,y,r,startAngle,endAngle,anticlockwise)
1.圆心点：x , y
2.半径： r
3.开始、结束角：startAngle, endAngle
4.以什么方向开始点到结束点（顺时针还是逆时针）：anticlockwise

ctx对象，具备的状态

ctx内部存储了很多东西：

1.描边、填充的样式
2.路径
1.已经绘制出来的路径
2.我的“钢笔”当前所在的位置
3.还有很多，比如说：全局透明度，叠加方式，字体，坐标系变换……

canvas的实际使用

2.canvas路径绘制基础
1.创建一个画布

    创建一个canvas标签，然后为canvas标签设置width 和height属性。    ** 是通过标签的属性来设置宽高，而非通过style(样式)来设置宽高的。因为属性设置的宽高，决定了画布本身内容的宽高。用style设置的话，只是样式上的宽高。这个可以img标签**

2.拿到绘图的上下文（绘图工具包）

     var cvs =document.getElementById('cvs');     var ctx =cvs.getContext('2d');     传入 2d作为参数，表示我们要拿2d绘图上下文。     *除了2d绘图上下文之外，可以用‘webgl’来获取2d绘图上下文*

3.四个绘图的函数

  -moveTo(x,y):x,y代表一个点的坐标；  -lineTo(x,y):同上  -moveTo用于移动钢笔的位置，lineTo用于连接发到一个新的点，它们组合起来使用，就可以绘制路径。  -stroke():描边路径  -fill():填充路径

3.绘制矩形的路径：ctx.rect(x,y,w,h）

    1.左上角坐标x,y  宽高w,h    2.直接绘制函数        1.fillRect(x,y.w.h):直接填充一个矩形；        2.strokeRect(x,y,w,h):直接描边一个矩形        3.clearRect(x,y,w,h):清除一个矩形        4.fillRect和strokeRect，也继承 fillStyle和strokeStyle 以及 lineWidth 的位置。

5.绘制文字

    1.ctx.strokeText() 或者ctx.fillText()来描边或者填充文字。    2.我们可以用ctx.font来设置字体，其设置和css一样。    `ctx.font='20px Microsoft';`    3.描边 和填充文字继承ctx.strokeStyle和ctx.fillStyle的颜色设置。    4.不要设置描边或者填充文字时的maxWidth参数，因为那样的话，文字会被压扁，非常难看。    5.measureText('abc').width来得到即将绘制的文字的宽度。    6.默认的，fillText和strokeText绘制的文字，在定位点的右上角。定位点是什么呢？ =>第2、3个参数确定出来的一个点。    7.设置文字的对齐方式：ctx.textAlign='center';        1.center:居中        2.left:向左对齐        3.right：向右对齐    8.设置文字的垂直对齐方式：ctx.textBaseline='middle'        1.middle:垂直居中        2.top:向上对齐        3.bottom:向下对齐        4.alphabetic:默认（基线）        5.hanging: 悬挂        6.ideographic:写意基线

6.绘制图像

1.ctx.drawImage(img,......)       1.第一个参数img，是一个元素，这个元素上要有图像。所以他只能是img 元素或者canvas元素。       2.三个参数时：               1.后两个参数确定要绘制的图像的左上角的坐标。然后把它等宽高的绘制到canvas上。        3.五参数:                1.后四个参数，在canvas上确定一个矩形区域，然后把图像缩放，拉伸着，绘制到那个矩形区域中。        4.九参数：               1.2~5个参数：从原图上截取一个矩形；               2.6~9个参数：从canvas上确定一个矩形区域               3.把原图上截下来的图像绘制到canvas上面的那个矩形区域中