一、绘制矩形
可能用到的函数
1、fillRect(x,y,width,height)：绘制矩形，无边框，填充颜色，xy是坐标，width/height是宽高，下面两个函数的参数一样
2、strokeRect(x,y,width,height)：绘制矩形，有边框
3、clearRect(x,y,width,height)：清除填充
实例：
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="mycanvas" width="300" height="200">浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#f00";
cxt.fillRect(0, 0, 100, 100);
cxt.strokeRect(200, 0, 100, 100);
cxt.clearRect(0, 0, 100, 100);
</script>
</body>
</html>
二、绘制圆形
可能用到的函数
1、beginPath()：开始绘图
2、arc(x,y,radius,startAngle,endAngle,anticlockwise)：画圆，xy原点，radius半径，startAngle、endAngle起始和 结束弧度，anticlockwise方向
3、closePath()：结束绘图
4、fill()：填充
5、stroke()：画边框
实例
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="mycanvas" width="300" height="200">浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#f00";
cxt.beginPath();
cxt.arc(150, 100, 50, 0, Math.PI, false);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
三、绘制直线
函数或属性
1、moveTo(x,y)
2、lineTo(x,y)
3、stroke()
4、strokeStyle
实例
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="mycanvas" width="300" height="200">浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
cxt.strokeStyle = "#f00";
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.lineTo(300, 100);
cxt.lineTo(0, 200);
cxt.stroke();
cxt.closePath();
</script>
</body>
</html>
四、绘制贝济埃曲线
五、绘制渐变图形
六、绘制变形图形
七、绘制带阴影的图形
八、使用图像
九、绘制文字
综合实例