canvas(三)

繪製矩形

1.快速建立矩形rect()方法

ctx.rect(x, y, width, height);

• 解釋：x, y是矩形左上角座標， width和height都是以畫素計

• rect方法只是規劃了矩形的路徑，並沒有填充和描邊。
  2.建立描邊矩形

ctx.strokeRect(x, y, width, height);

引數跟rect(x, y, width, height)相同，注意此方法繪製完路徑後立即進行stroke繪製。
3.建立填充矩形

ctx.fillRect(x, y, width, height);

引數跟rect(x, y, width, height)相同， 此方法執行完成後，立即對當前矩形進行fill填充。
4.清除矩形（clearReact）

ctx.clearRect(x, y, width, hegiht);

解釋：清除某個矩形內的繪製的內容，相當於橡皮擦。

	<canvas id="mcanvas">你的瀏覽器不支援canvas，請升級瀏覽器</canvas>

    <script>
        
        var mcanvas  = document.getElementById("mcanvas");    //獲得畫布

        var mcontext = mcanvas.getContext("2d");    //獲得上下文

        mcanvas.width = 900;     //重新設定標籤的屬性寬高
        mcanvas.height = 600;    //千萬不要用 canvas.style.height

        //rect方法只是規劃了矩形的路徑，並沒有填充和描邊，需要單獨描邊或填充。
        mcontext.rect(20,20,300,200);
        mcontext.stroke();

        //快速建立一個描邊的矩形
        mcontext.strokeRect(400,20,300,200);

        //快速建立一個填充的矩形
        mcontext.fillRect(20,300,300,200);

        //在畫布上建立一個矩形區域，該矩形區域中的圖形都會被清除
        mcontext.clearRect(120,350,100,100);

    </script>

繪製圓形

arc() 方法用於建立弧線（用於建立圓或部分圓）。

ctx.arc(x, y, r, startAngle, endAngle, counterclockwise);

解釋：
x,y：圓心座標。
r：半徑大小。
sAngle:繪製開始的角度。 圓心到最右邊點是0度，順時針方向弧度增大。
eAngel:結束的角度，注意是弧度。
counterclockwise：是否是逆時針，預設是false。true是逆時針，false：順時針

注意：弧度和角度的轉換公式： rad = deg*Math.PI/180;

繪製圓形和餅圖

<canvas id="mcanvas">你的瀏覽器不支援canvas，請升級瀏覽器</canvas>
    <script>
        
        var mcanvas  = document.getElementById("mcanvas");    //獲得畫布
        var mcontext = mcanvas.getContext("2d");    //獲得上下文
        mcanvas.width = 900;     
        mcanvas.height = 600;  

        //繪製圓形  
        mcontext.beginPath();
        mcontext.arc(200,200,100,0,360*Math.PI/180);
        mcontext.closePath();
        mcontext.stroke();

        // 通過資料進行繪製餅圖
        var data = [{
            "value": .2,
            "color": "red",
            "title": "應屆生"
        },{
            "value": .3,
            "color": "blue",
            "title": "社會招生"
        },{
            "value": .4,
            "color": "green",
            "title": "老學員推薦"
        },{
            "value": .1,
            "color": "#ccc",
            "title": "公開課"
        }];

        var tempAngle = -90;
        var x0 = 600, y0 = 300;
        var raduis = 200;

        for(var i = 0; i < data.length; i++) {
            mcontext.beginPath();
            mcontext.moveTo(x0, y0);
            var angle = data[i].value * 360;
            var startAngle = tempAngle*Math.PI/180;
            var endAngle  = (tempAngle+angle)*Math.PI/180;
            mcontext.fillStyle = data[i].color;
            mcontext.arc(x0, y0, raduis, startAngle, endAngle);
            mcontext.closePath();
            mcontext.fill();
            tempAngle += angle;
        }

    </script>

三角函式的補充：

Math.sin(弧度); //夾角對面的邊 和 斜邊的比值

Math.cos(弧度); //夾角側邊與斜邊的比值

圓形上面的點的座標的計算公式

x =x0 + Math.cos(rad) * R;//x0和y0是圓心點座標

y =y0 + Math.sin(rad) * R;//注意都是弧度