Canvas

没接触canvas的时候总感觉好难，接触canvas之后感觉还行，其实挺简单的。其实学习前端没有什么难的，只要我们想，我们就可以会。我始终相信 过分的自恋就是简单的自信，简单的自信可以让自己变得阳光。加油！

canvass是HTMl5的新标签，和其他的demo一样 拥有自己的属性，方法 以及事件，其中最重要的是绘图方法。js能够用它进行绘图。
注：canvas的宽高是以属性的形式设置。 而不是css
context是一个封装了很多绘图功能的对象，获取这个对象的方法是：
var context = canvas.getContext('2d');
canvas 元素绘制图像的时候有两种方法 ：

context.fill() 填充；
context.stroke() 绘制边框；

style ： 在进行图像绘制前 设置好绘图的样式；

context.fillStyle = '样式'； 填充的样式；
context.strokeStyle = ‘样式’ 边框的样式；
context。lineWidth 图形边框的宽度；

绘制：
绘制一条线段；

    
    
```
样式：
设置两端的样式：
```context.lineCap ：  but（平的  默认） || round  （圆角）  || square （方角）；```

>继续添加线段
在context.lineTo 后添加 语句：
在上一个结束点之后加上：
contex.lineTo(X,y);
当拐弯的时候有一个拐角  我们同样可以设置他的样式；
context.lineJoin = 'round(圆角)'  || 'miter（尖角）' || 'bevel（斜角）' 

绘制矩形：
两种方法：
>（1）context.rect（矩形起点的横坐标，矩形起点的纵坐标，矩形的宽度，矩形的高度）；
（2）context.fillRect矩形起点的横坐标，矩形起点的纵坐标，矩形的宽度，矩形的高度）；

矩形
    ```function demo2() {
        ctx.beginPath();
        ctx.strokeStyle = 'yellow';
        ctx.lineWidth = '5';
        ctx.rect(20,20,100,100);
        ctx.stroke();
        ctx.closePath();
    }
    demo2();
矩形
    function demo3() {
        ctx.strokeRect(150,150,120,120);
        //ctx.fillRect(150,150,120,120);
        ctx.strokeStyle = 'green';
        ctx.lineWidth = '5';
    }
    demo3();```

清除矩形区域： context。clearRect(清除矩形起点的横坐标，清除矩形起点的纵坐标，清除矩形的宽度，清除矩形的高度)；
可以实现这种效果：
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2956238-e6939b534f552560.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


 绘制圆弧/圆形
```context.arc(x,y,start,end,gradient); 
context.arc（圆心的X坐标，圆心的Y坐标，开始的角度，结束的角度，方向）；```
开始的角度是在 三点中的位置；
注：每次绘制图像的时候 前后加 context。beginPath() 以及 context.closePath（）；
>线性渐变：
var lg = context。createLinearGradient(渐变开始的x坐标，渐变开始的y坐标，渐变结束的X坐标，渐变结束的Y坐标)；
圆形渐变：
var grd = context。createRadialGradient(发散开始的圆心的X坐标， 发散开始的圆心Y坐标，发散开始的圆的半径，发散结束圆心的x坐标，发散结束圆心的y坐标，发散结束圆的半径)；

```//线性渐变  // 圆形渐变
        function demo2(){
            ctx.beginPath();
            // var lg = ctx.createLinearGradient(0,100,300,200); //线性渐变
            var lg = ctx.createRadialGradient(150,150,20,150,150,100,150,150,150); //参数  圆心坐标 半径        渐变的第二个圆的圆心
            lg.addColorStop(0,'red');
            lg.addColorStop(0.5,'green');
            lg.addColorStop(1,'blue');
            ctx.fillStyle = lg;
            // ctx.fillRect(10,50,350,80);
            ctx.arc(150,150,100,0,2*Math.PI,false);  //圆心坐标  半径  起始角度  终点角度  true  顺时针  false 逆时针
            // ctx.stroke();
            ctx.fill();
            ctx.closePath();
        }
        demo2();```

图形变形：
1.平移：context。translate（x,y）；
2.缩放：context。scale（x,y）;
3.旋转：context。rotate（角度）；

绘制图像：
context。drawImage（图片，图片左上顶点的x坐标，图片左上顶点y坐标，矩形区域的宽度截取图片的宽度，矩形区域的高度 截取图片的高度，画在canvas上面的x坐标，画在canvas上面的y坐标，画出来的宽度，画出来的宽度，画出来的高度，）
context。drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
>sx,sy,sw,sh, 是截取图片的过程；
dx,dy,dw,dh 吧图片放在canvas的过程;

未完待续。。。