没接触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 图形边框的宽度；
绘制：
绘制一条线段；
<canvas width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
//绘制线段
function line(){
context.beginPath(); //开始一条路径
context.strokeStyle = 'blue'; // 设置颜色
context.lineWidth = '5'; // 设置宽度
context.moveTo(20,100); // 线段的起始点
context.lineTo(200,100); // 线段的结束点
context.stroke(); // 绘制方法 进行绘制
context.closePath(); // 结束一条路径
}
line();
</script>
</body>```
样式：
设置两端的样式：
```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(清除矩形起点的横坐标，清除矩形起点的纵坐标，清除矩形的宽度，清除矩形的高度)；
可以实现这种效果：
绘制圆弧/圆形
```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的过程;
未完待续。。。