外星人源码论坛_H5之家 - 中国HTML5教程资源分享第一站

canvas是html5出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。
canvas绘制图形有两种方法：
[ol]
context.fill()             //填充
context.stroke()          //绘制边框
[/ol]
在绘制图形前要设置好图形样式，也有两种方法：
[ol]
context.fillStyle()          //填充的样式
context.strokeStyle()          //边框样式
[/ol]
下面就开始绘制各种图形
[ol]绘制矩形
context.fillRect(x,y,width,height)
context.fillRect(x,y,width,height)
x : 矩形的起点横坐标
y : 矩形的起点纵坐标
width : 矩形的宽度
[/ol]

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();

复制代码

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