1、绘制路径的方法
beginPath():开始一个新路径。
closePath():关闭路径。
stroke():绘制路径边框。
fill():使用颜色填充路径绘制的图形。
moveTo(x,y):设置坐标的位置。
lineTo(x,y):绘制一条直线。参数(x,y)是终点的坐标,起点坐标取决于前一路径(即:前一路径的终点就是当前路径的起点。可以通过moveTo()设置起始坐标。)
2、绘制路径的步骤
第一步:调用beginPath()创建路径。在内存里,路径是以一组子路径(直线、弧线等)进行存储,共同构成一个图形。每次调用beginPath(),子路径都会被重置,这样就可以绘制新的图形。
第二步:实际绘制路径。
第三步:调用closePath()关闭路径。尝试在当前端点通过直线连接起始端点来关闭图形。如果图形已经关闭 或者只有一个点,则不会执行任何操作。这一步是可选的。
第四步:调用stroke()或者fill(),此时,图形才实际的绘制到canvas上。
注:使用fill()时,图形会自动闭合,不需要调用closePath().
3、绘制路径实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .wraper { position: relative; border: 1px solid orange; } </style> <script type="text/javascript"> function draw(){ var can = document.getElementById('test'); if(can.getContext){ var cxt = can.getContext('2d'); cxt.beginPath(); cxt.moveTo(50,10); cxt.lineTo(100,160); cxt.lineTo(20,90); cxt.lineTo(50,10); cxt.stroke(); cxt.beginPath(); cxt.moveTo(190,20); cxt.lineTo(120,190); cxt.lineTo(140,50); cxt.fill(); } } </script> </head> <body οnlοad="draw();"> <canvas id="test" width="200px" height="200px" class="wraper"></canvas> </body> </html>
代码显示的效果: