【题目】【5天】canvas元素

题目一：绘制雪人，传递一个Boolean值，true是填充，false是圆圈。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var fillCricle = function(x,y,lineWidth,radius,boolean,color){
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,false);
    if(boolean){
        ctx.fillStyle = color;
        ctx.fill();
    }else{
        ctx.strokeStyle = color;
        ctx.stroke();
    }

};

fillCricle(100,100,4,60,false,"black");
fillCricle(100,110,4,10,true,"red");
fillCricle(80,80,4,10,true,"green");
fillCricle(120,80,4,10,true,"green");

fillCricle(100,240,4,80,false,"black");
fillCricle(100,240,4,10,true,"green");
fillCricle(100,208,4,10,true,"green");
fillCricle(100,272,4,10,true,"green");

题目二：编写一个函数，他将来接受一个数组：point =[[50,50],[50,100],[125,120],[100,50],[70,90],[100,90],[70,120]]，绘制一条直线连接这些店。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var point =[[50,50],[50,100],[125,120],[100,50],[70,90],[100,90],[70,120]];

var drawPoint = function (point) {
    //ctx.moveTo(point[0][0],point[0][1]);
    for(var i = 0; i < point.length; i++){
        ctx.lineTo(point[i][0],point[i][1]);
        ctx.stroke();
    }
};
drawPoint(point);

这题花了一些时间，主要问题是：

1. 绘制直线的思路是没理顺，应该是绘制第一个点，第二个点，第三个点，一次往后，最后连接起来；而当时我的思路是，两个点两个点连接，就一直在moveTo、lineTo循环中。
2. 不需要moveTo也可以绘制直线。