canvas學習

ctx.fillStyle='red';
ctx.fillRect(10,10,50,100);//x,y,width,height  //實心的
ctx.clearRect(x,y,width,height);//clear
ctx.strokeRect(x,y,width,height);//生成一個只有邊框的四邊形

ctx.beginPath(); //拿起畫筆 開始作圖
ctx.moveTo(x,y); //畫筆點的第一個點，x,y爲起始位置
ctx.lineTo(x,y);// 畫直線
ctx.closePath();//閉合路徑以後從新返回到上下文
ctx.fill();//閉合路徑並填充

示例1：

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,70);
ctx.lineTo(40,60);
ctx.fill();

示例1效果：

示例2：

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,70);
ctx.lineTo(40,60);
ctx.closePath();
ctx.stroke(); //若是僅僅閉合路徑不寫這行繪製的話，那效果是空白的

示例2效果：

示例3：

ctx.beginPath();
        // ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);//圓心x座標，圓心y座標，起始弧度，終止弧度，逆時針？
        ctx.arc(50,50,50,0,Math.PI，true);//默認anticlockwise爲true,默認逆時針
        ctx.stroke();

示例3效果：

示例4：

ctx.beginPath();
        // ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);//圓心x座標，圓心y座標，半徑,起始弧度，終止弧度，逆時針？
        ctx.arc(50,50,50,0,Math.PI*2,true);//逆時針
        ctx.moveTo(80,50);
        ctx.arc(50,50,30,0,Math.PI,false);//順時針 mouth
        ctx.moveTo(35,25);
        ctx.arc(25,25,10,0,Math.PI*2,false);
        ctx.moveTo(85,25)
        ctx.arc(75,25,10,0,Math.PI*2,false);
        ctx.stroke();

示例4效果：