html canvas第三课 （moveto lineto beginpath closepath measureText等）

第3周课程总结（9.16～9.20）
1、复习上周内容，熟悉setTimeout方法及其运行原理。

var n=0;
function showWords()
{
    context.clearRect(0, 0, canvas.width, canvas.height);//清空
    if(n<words.length)
    {
        drawText(words.charAt(n),style,true);//展示words的第n个字
    }
    else if(n>=words.length)
    {
        drawText(words,style,true);//展示全部
    }
    n++;//计数器
    if(n<=words.length)//setInterval函数
    {
        setInterval(showWords, 500);//函数+间隔
    }
}

2、自定义drawText函数，熟悉fillText、strokeText方法及相关文本属性的使用

function drawText(text,style,isfill)
{
    //设置字体大小，文字位置
    context.font=style.fontSize+"px "+style.fontFamily;
    context.textBaseline=style.wAlign;
    context.textAlign=style.hAlign;
    
    if(isfill)//填充颜色
    {
        context.fillStyle=style.color;
        context.fillText(text, canvas.width/2, canvas.height/2);
    }
    else{//颜色描边
        context.strokeStyle=style.color;
        context.strokeText(text, canvas.width/2, canvas.height/2);
        
    }
}

3、自定义drawLine函数，介绍moveTo方法、lineTo方法、stroke方法

function drawLine(line,style)//传入的参数
{
    context.moveTo(line.x0, line.y0);//起点
    context.lineTo(line.x1, line.y1);//终点

    context.lineWidth=line.lineWidth;//宽度（厚度）
    
    context.strokeStyle=style.color;//stroke 先选中颜色再画线（可以想象为毛笔画画）
    context.stroke();
    
}

//修改line值或者style值
line.x0=line.x1-w/2;
line.y0=line.y1;
line.x1=line.x0+w;

//画线
drawLine(line,style);

4、自定义drawArc函数，介绍arc方法

var circle={
    x:canvas.width/2,
    y:canvas.height/2,
    r:5*w,
    sAngle:0,
    eAngle:2*Math.PI,
    width:3
};

function drawArc(circle,style)
{
    context.beginPath();//开始

    context.lineWidth=circle.width;//设定厚度
    
    context.arc(circle.x, circle.y, circle.r, circle.sAngle, circle.eAngle, false);//画圆函数
    context.strokeStyle=style.color;//上色
    context.stroke();

}

5、beginPath和closePath方法的使用
坐飞机（这篇讲的很好）

context.beginPath();//开始绘图（每一条新的线段都需要先写beginPath，否则stroke后会覆盖“上一次beginPath”之后的所有路径。）
context.clothPath();//将之前未闭合的线段 首尾相连

6、save和restore方法的使用（周一班未讲）
7、Math对象介绍、自定义JS对象的使用

var circle={
    x:0,
    y:0,
    r:0,
    sAngle:0,
    eAngle:Math.PI
};

8、介绍获取绘制文本宽度measureText方法的使用。

var words="你好啊";

//得到words在屏幕上显示的长度（非字节数）
var w=context.measureText(words).width;

作业：
1、结合课程要点，复习本周课堂练习。
2、复习首页视频2.8～2.12，3.4和第四单元。
3、预习首页视频2.13（重点） ，3.6，3.7。