canvas--绘制路径

<canvas id="c1" width="400" height="400" style="background-color:red">
</canvas>

<script type="text/javascript">
//获取画布元素
var canvas=document.getElementById("c1");
//绘制环境（我称为“画笔”）
var cxt=canvas.getContext("2d");

//绘制路径
cxt.beginPath();//开始绘制路径
cxt.moveTo(20,20);//起点
cxt.lineTo(20,120);//下一个点
cxt.lineTo(50,50);
cxt.closePath();//结束绘制路径

//路径设置完成，页面中不会显示。需要设置它的绘制方式

cxt.stroke();//画线

//绘制路径
cxt.beginPath();//开始绘制路径
cxt.moveTo(60,20);//起点
cxt.lineTo(60,120);//下一个点
cxt.lineTo(90,50);
cxt.closePath();//结束绘制路径

//路径设置完成，页面中不会显示。需要设置它的绘制方式

cxt.fill();//填充

//改变颜色
cxt.strokeStyle="#3366cc";
cxt.fillStyle="#ffff00";

//绘制路径
cxt.beginPath();//开始绘制路径

cxt.moveTo(20,220);//起点
cxt.lineTo(20,320);//下一个点
cxt.lineTo(50,250);
cxt.closePath();//结束绘制路径

//路径设置完成，页面中不会显示。需要设置它的绘制方式

cxt.stroke();//画线

//绘制路径
cxt.beginPath();//开始绘制路径
cxt.moveTo(60,220);//起点
cxt.lineTo(60,320);//下一个点
cxt.lineTo(90,250);
cxt.closePath();//结束绘制路径

//路径设置完成，页面中不会显示。需要设置它的绘制方式

cxt.fill();//填充
</script>

效果图：



【新知识点】：

　　1、beginPath():开始绘制路径

　　2、closePath():结束绘制路径

　　3、moveTo(x,y):起点坐标

　　4、lineTo(x,y):下一点坐标

　　5、stroke():画线

　　6、fill():填充

【注意】：

　　fillStyle:只对填充图形有效

　　strokeStyle:只对画线图形有效