摘要：舉個栗子繪制矩形上面代碼先取得對象上下文，接著繪制了一個填充矩形和邊框矩形，并清除了一個矩形區(qū)域。

需要你懂得以下方法的使用：

beginPath()

moveTo()

lineTo()

closePath()

具體用法可以參考我的上一篇文章 canvas入門－利用canvas制作一個七巧板

canvas提供了三種繪制矩形的方法：

fillRect(x, y, width, height)

繪制一個填充的矩形

strokeRect(x, y, width, height)

繪制一個矩形的邊框

clearRect(x, y, width, height)

清除制定矩形區(qū)域啊

上面方法的參數(shù)里 x 和 y 分別為相對于canvas原點(diǎn)的坐標(biāo)，width 和 height 設(shè)置了矩形的尺寸。
舉個栗子：

window.onload = function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 900;
    canvas.height = 600;
    //繪制矩形
    ctx.fillRect(0,0,300,300);
    ctx.strokeRect(5,200,200,200);
    ctx.clearRect(0,0,100,100);
};

上面代碼先取得canvas對象上下文，接著繪制了一個填充矩形和邊框矩形，并清除了一個矩形區(qū)域。

在這之前，需要分析五角星各個頂點(diǎn)的位置，以及弧度，由于數(shù)學(xué)水平有限，都怪當(dāng)初不好好學(xué) T.T

x:cos(18+i72)r //確定 x 坐標(biāo)值

y:-sin(54+i72)r //確定 y 坐標(biāo)值

角度化 num/180*Math.PI //js將數(shù)值角度化的轉(zhuǎn)換公式

400是圓的圓心點(diǎn)，如果不加400，則圓心點(diǎn)為0,0

下面為繪制五角星的函數(shù)，有五個參數(shù)：ctx:繪圖環(huán)境，R:大圓半徑，x：x坐標(biāo)值， y：y坐標(biāo)值, rot：旋轉(zhuǎn)角度

function drawStar(ctx,R,x,y,rot){
    ctx.beginPath();
    for (var i = 0; i < 5; i++ ) {
        ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R + x,-Math.sin((18+i*72-rot)/180*Math.PI)*R + y);
        ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*R/2.4 + x,-Math.sin((54+i*72-rot)/180*Math.PI)*R/2.4 + y);
    };
    ctx.closePath();
    ctx.fill();
}

下面貼上完整代碼：

    
    
    


    
        當(dāng)前瀏覽器不支持cnavas        
    

最后效果為：