canvas画布基础

canvas是个神奇的标签，开始学习之后就停不下来，这两天一直在慕课网上学习canvas的动画，老师讲的很好，很详细，现在我就简单的总结一下这两天学的内容。
首先对于HTML中的代码很简单：

<canvas id = "canvas" style = "border:1px solid #eee;display:block;margin:0 auto"></canvas>

然后在JavaScript中获取canvas

window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 1200;
        canvas.height = 795;
        context = canvas.getContext("2d");
}

context非常重要，它用来承载我们所要实现的内容

//直线
context.strokeStyle = "red";//直线的颜色
context.lineWidth = 3;//直线的宽度
context.beginPath();
context.moveTo(100,100);
context.lineTo(800,800);
context.closePath();
context.stroke();//绘制直线

//矩形
context.fillStyle = "blue";//矩形的填充颜色
context.strokeStyle = "black";//矩形的边框颜色
context.lineWidth = 3;//矩形边框的宽度
context.beginPath();
context.fillRect(100,100,200,100);//绘制一个起点在100,100位置宽200高100的矩形，矩形填充色为蓝色
context.strokeRect(100,100,200,100);//给矩形绘制宽度为3的黑色边框

//圆形
context.arc(x,y,r,o,f,true);//x:圆心的x坐标，y;圆心的y坐标，r:半径，o圆的起始位置，f:圆的终止位置，true or false:表示顺时针或者逆时针
//圆环
实现圆环是先画两个不一样大小的圆，要保证这两个圆的旋转方向是相反的，然后进行背景色的填充，这是根据非零环绕原则进行的区域填充
//直线渐变
var linearGrad = context.createLinearGradient(0,0,800,700);
linearGrad.addColorStop(0.0,"#fff");
linearGrad.addColorStop(1.0,"#000");
context.fillStyle = linearGrad;
context.fillRect(0,0,800,700);
//径向渐变
var radiaGrad = context2.createRadialGradient(400,400,100,400,400,500);
radiaGrad.addColorStop(0,"white");
radiaGrad.addColorStop(0.25,"yellow");
radiaGrad.addColorStop(0.5,"green");
radiaGrad.addColorStop(0.75,"blue");
radiaGrad.addColorStop(1,"black");
context2.fillStyle = radiaGrad;
context2.fillRect(0,0,800,800);
//图片填充
var img = new Image();
img.src = "1.jpg";
img.onload = function(){
    var pattern = context.createPattern(img,"repeat");//repeat,repeat-x,repeat-y,no-repeat
    context.fillStyle = pattern;
    context.fillRect(0,0,800,600);
 }
//线条的属性
lineCap="butt"//默认直线两端的样式
       ="round"
       ="square"
lineJoin = "miter"
           "bevel"
           "round"
//曲线的绘制
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,r);//与x0y0到x1y1这条直线和x1y1到x2y2这条直线相切半径为r的曲线
//二次贝塞尔曲线
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);//x1,y1为曲线的控制点，x0y0为曲线的起始点，x2y2为曲线的终止点
//三次贝塞尔曲线
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);//x1y1与x2y2为两个控制点