HTML5之CANVAS学习

canvas是html5出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。希望对正在入门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';        //发现要先设置填充颜色

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

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

    }

 draw();

圆
context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
radius : 半径

原文来自：好JSER