canvas是html5出現(xiàn)的新標簽，主要用來畫圖，看見網(wǎng)上能用來實現(xiàn)各種圖形，所以感覺很好玩，就學習了一下。希望對正在入門HTML5 的童鞋有用。
canvas繪制圖形有兩種方法：

context.fill() //填充

context.stroke() //繪制邊框

在繪制圖形前要設置好圖形樣式，也有兩種方法：

context.fillStyle() //填充的樣式

context.strokeStyle() //邊框樣式

下面就開始繪制各種圖形

繪制矩形
context.fillRect(x,y,width,height)
context.fillRect(x,y,width,height)
x : 矩形的起點橫坐標
y : 矩形的起點縱坐標
width : 矩形的寬度

function draw(){

        var canvas = document.getElementById('chen'),

            context = canvas.getContext('2d');

            canvas.width = 100;

            canvas.height = 100;

            context.fillStyle = 'red';        //發(fā)現(xiàn)要先設置填充顏色

            context.fillRect(0, 0, 100 ,100);

            context.strokeRect(0, 100, 100 ,100);

    }

 draw();

圓
context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
radius : 半徑

原文來自：好JSER