canvas绘制复杂形状或路径

在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法绘制复杂形状或路径。

函数名 作用
beginPath() 开始绘制一个新路径
closePath() 通过绘制一条当点到路径起点的线段来闭合形状
fill(),stroke() 填充形状或绘制空心形状
moveTo(x,y) 将当前点移动到点(x,y)
lineTo(x,y) 从当前点绘制一条直线段到点(x,y)
arc(x,y,radius,startAngle,endAngle,anticlockwise) 绘制一条指定半径的弧到点(x,y)

用上述的方法绘制复杂形状需要遵循以下步骤:

  1. 使用beginPath()方法开始绘制路径。
  2. 使用moveTo()、lineTo()、arc()方法创建线段。
  3. 使用closePath()结束绘制并闭合形状(可选)。
  4. 使用stroke()或fill()绘制路径的外边框或填充形状。使用fill()会自动闭合所有未闭合的路径。


我们创建了一个Html5 canvas标记

粘贴以下代码你可以看到如上效果

/**********************************绘制复杂形状*******************************************/
//填充三角形
context.beginPath();    //开始绘制一个新的路径
context.moveTo(10,120);	//从点(10,20)开始     //将当前点移动到点(x,y)
context.lineTo(10,180);	//从当前点绘制一条直线段到点(x,y)
context.lineTo(110,150);
context.fill();    //闭合形状并且以填充的方式绘制出来
			
//三角形的外边框
context.beginPath();
context.moveTo(140,160); //从点(140,160)开始
context.lineTo(140,220); 
context.lineTo(40,190);
context.closePath();    //结束绘制并闭合形状
context.stroke();	//绘制路径的外边框或填充形状
			
//一个更复杂的多边形
context.beginPath();
context.moveTo(160,160);
context.lineTo(170,220);
context.lineTo(240,210);
context.lineTo(260,170);
context.lineTo(190,140);
context.closePath();
context.stroke();
			
/**********************************绘制弧*******************************************/
			
//绘制半圆弧
context.beginPath();
//在(400,50)处逆时针画一个半径为40,角度从0到180度的弧线
//arc(x,y,radius,startAngle,endAngle,anticlockwise)
context.arc(400,50,40,0,Math.PI,true);    //PI的弧度是180度
context.stroke();
			
//画一个实心圆
context.beginPath();
//在(500,50)处逆时针画一个半径为30,角度为0到360度的圆弧
context.arc(500,50,30,0,2*Math.PI,true);
context.fill();
			
//画一个3/4弧
context.beginPath();
//在(400,100)处顺时针画一个半径为25,角度为0到270的弧
context.arc(400,100,25,0,3/2*Math.PI,false);
context.stroke();