在画布中使用路径-Canvas的基本操作

一、在画布中使用路径

beginPath()
新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径
moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath()
闭合路径之后,图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形

1.使用arc方法绘制圆形

要想绘制其他图形,需要使用路径。同绘制矩形一样,绘制开始时还是要取得图形上下文,然后需要执行如下步骤。
开始创建路径
使用图形上下文对象的beginPath()方法,该方法的定义如下所示:
context.beginPath() //该方法不使用参数。通过调用该方法,开始路径的创建。
创建图像的路径
使用图形上下文对象的act方法。该方法的定义如下所示。
context.arc(x,y,radius, startAngle, endAngle,anticlockwise)
该方法使用六个参数,x为绘制圆形的起点横坐标,y为绘制圆形的起点纵坐标,radius
为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise为是否
按顺时针方向进行绘制。在canvas API中,绘制半径与弧时指定的参数为开始弧度与
结束弧度,如果习惯使用角度,请使用如下所示的方法将角度转换为弧度。
var radians =degrees*math.PI/180
其中math.PI表示角度为180度,math.PI*2表示角度为360度。
arc方法不仅可以用来绘制圆形,也可以用来绘制圆弧。因此,使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。Anticlockwise参数为一个布尔值的参数,参数值为true时,按顺时针绘制;参数值为false时,按逆时针方向绘制。
关闭路径
路径创建完成后,使用图形上下文对象的closePath方法将路径关闭。该方法定义如下
所示。
context.closePath();
将路径关闭后,路径的创建工作就完成了,但是需要注意的是,这时只是路径创建完毕
而已,还没有真正绘制图形。
进行圆形绘制,并设定绘制样式。实现的代码如下所示。
context.fillStyle = 'rgba(255, 0, 0, 0.25)'; context.fill();


<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>canvas元素arc示例</title>  
<script language="JavaScript">
function draw(id) 
{  
    var canvas = document.getElementById(id);  
    if (canvas == null) return false;  
    var context = canvas.getContext('2d');  
    context.fillStyle = "#EEEEFF";  
    context.fillRect(0, 0, 200, 200);  

    context.beginPath();  
	context.arc( 100, 100,50, 0, Math.PI*2,  true);  
	context.closePath();  
	context.fillStyle = 'rgba(255, 0, 0, 0.25)';  
	context.fill();  
        
}
</script>  
</head>  
<body onload="draw('canvas');">  
<h1>canvas中画圆形</h1>  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

image.png


2. 使用moveTo与lineTo路径绘制火柴人

moveTo(x,y):不绘制,只是将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。
简而言之,上面两个函数的区别在于:moveTo就像是提起画笔,移动到新位置,而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。需要提醒大家注意的是,不管调用它们哪一个,都不会真正画出图形,因为我们还没有调用stroke或者fill函数。目前,我们只是在定义路径的位置,以便后面绘制时使用。
我们再来看一个特殊的路径函数叫做closePath。这个函数的行为和lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为
目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域,这对将来的填充和描边都非常有用。
代码:

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>canvas元素示例</title>  
<script >
function draw(id) 
{  
    var canvas = document.getElementById(id);  
    var context = canvas.getContext('2d');  
    context.fillStyle = "#EEEEFF";  
    context.fillRect(0, 0, 300, 300);  
  
  	context.beginPath();
  	context.strokeStyle = '#c00';
  	context.lineWidth = 3;
	context.arc(100, 50, 30, 0, Math.PI*2, true); 
  	context.fill();
  	context.stroke();

  	context.beginPath();
  	context.strokeStyle = '#c00';
  	context.lineWidth = 3;
  	context.arc(100, 50, 20, 0, Math.PI, false);
  	context.fill();
  	context.stroke();

  	context.beginPath();
  	context.fillStyle = '#c00';
 	context.arc(90, 45, 3, 0, Math.PI*2, true);
 	context.fill();
	context.stroke(); 
 	context.moveTo(113, 45);
 	context.arc(110, 45, 3, 0, Math.PI*2, true);
 	context.fill();
 	context.stroke(); 

 	context.beginPath();
 	context.moveTo(100, 80); // move to neck
 	context.lineTo(100, 180); // body
	context.lineTo(75, 250); // 绘制左腿
	context.moveTo(100, 180); // move to hips
	context.lineTo(125, 250); // 绘制右腿
	context.moveTo(100, 90); // move to shoulders
	context.lineTo(75, 140); // 绘制左胳膊
	context.moveTo(100, 90); // back to shoulders
	context.lineTo(125, 140); // 绘制右胳膊
	context.stroke();
}
    context.closePath();  
</script>  
</head>  
<body onload="draw('canvas');">  
<h1>canvas中绘制火柴人</h1>  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

image.png


3. 贝塞尔和二次方曲线

绘制贝塞尔曲线主要使用bezierCurveTo方法。该方法可以说是lineTo的曲线版,将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。该方法的定义如下所示。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
该方法使用六个参数。绘制贝塞尔曲线的时候,需要两个控制点
,cp1x为第一个控制点的横坐标,cp1y为第一个控制点的纵坐
标;cp2x为第二个控制点的横坐标,cp2y为第二个控制点的纵
坐标;x为贝塞尔曲线的终点横坐标,y为贝塞尔曲线的终点纵坐标。
绘制二次样条曲线,使用的方法是quadraticCurveTo。该方法的定义如下所示。
quadraticCurveTo(cp1x, cp1y, x, y)
两种方法的区别如下图所示。它们都是一个起点一个终点(图中
的蓝点),但二次方贝塞尔曲线只有一个(红色)控制点点)而
三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标,cp1x 和
cp1y 是第一个控制点的坐标,cp2x 和 cp2y 是第二个的。
image.png

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?