HTML5 | 画布绘制贝塞尔曲线-Article-IT72.COM

HTML5 | 画布绘制贝塞尔曲线

Home / Article MrLee 2020-5-27 3124

可以使用弧线在HTML画布上绘制曲线，但是使用弧线绘制复杂的图则是一项繁琐的任务。在给定的情况下，贝塞尔曲线在提供更大的绘制曲线灵活性方面将非常有用。HTML画布上的贝塞尔曲线是使用起点，一个或多个控制点和一个端点绘制的。示例：在绘制风景，真实世界的物体，不规则形状等的情况下。

可以以两种方式绘制贝塞尔曲线：

二次贝塞尔曲线

三次贝塞尔曲线

二次贝塞尔曲线：该曲线由一个控制点控制。

moveTo（start_pnt_X，start_pnt_Y）; 
context.quadraticCurveTo（cntrl_pnt_X，cntrl_pnt_Y，end_pnt_X，end_pnt_y）;

示例：此示例使用二次贝塞尔曲线创建一条曲线。

<!DOCTYPE html> 
<html> 
<head> 
	<title> 
		Quadratic Bezier Curve 
	</title> 
</head> 
<body> 
	<h1>Quadratic Bezier Curve</h1> 
	
	<canvas id="CanvasOfGeeks" width="400" height="200"
			style="border:solid 4px green"> 
	
	<script> 
		var c = document.getElementById("CanvasOfGeeks"); 
		var context = c.getContext("2d"); 
		
		var start_pnt_X = 50; 
		var start_pnt_Y = 150; 
		var cntrl_pnt_X = 200; 
		var cntrl_pnt_Y = 30; 
		var end_pnt_X = 350; 
		var end_pnt_Y = 150; 
		
		/* Start new path */ 
		context.beginPath(); 
		context.lineWidth=3; 
		context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y); 
		
		/* Starting point of the curve */ 
		context.moveTo(start_pnt_X, start_pnt_Y); 
		
		context.quadraticCurveTo(cntrl_pnt_X, 
					cntrl_pnt_Y, end_pnt_X, end_pnt_Y); 
					
		/* drawing line on the canvas */ 
		context.stroke(); 
	</script> 
</body> 
</html>

说明：

先决条件：HTML Canvas基础

第一行：使用DOM概念将对画布对象的引用存储在变量'c'中。

第二行：如果没有画布的绘制上下文，则无法在其上绘制任何内容。

var c = document.getElementById("CanvasOfGeeks"); 
       var context = c.getContext("2d");

可以通过覆盖上下文对象的“ lineWidth”属性值来更改线宽。

context.lineWidth = 3;

将点放在控制点的坐标上。您可以在上图中看到该点。

context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);

此功能用于从功能中提到的起点绘制曲线。

context.quadraticCurveTo（cntrl_pnt_X，cntrl_pnt_Y，end_pnt_X，end_pnt_Y）;

此功能用于移动上下文。

context.moveTo（start_pnt_X，start_pnt_Y）;

注意：请将控制点保持在画布边界内。

三次贝塞尔曲线：此曲线由两个控制点控制。

moveTo(start_pnt_X, start_pnt_Y);
contex.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y, cntrl_pnt_2_X,
                      cntrl_pnt_2_Y, end_pnt_X, end_pnt_y);

例子

<!DOCTYPE html> 
<html> 
	
<head> 
	<title> 
		Cubic Bezier Curve 
	</title> 
</head> 
<body> 
	<h1>Cubic Bezier Curve</h1> 
	
	<canvas id="CanvasOfGeeks" width="400" height="200"
			style="border:solid 4px green"> 
	
	<script> 
		var c = document.getElementById("CanvasOfGeeks"); 
		var context = c.getContext("2d"); 
		
		var start_pnt_X = 50; 
		var start_pnt_Y = 100; 
		var cntrl_pnt_1_X = 150; 
		var cntrl_pnt_1_Y = 30; 
		var cntrl_pnt_2_X = 250; 
		var cntrl_pnt_2_Y = 170; 
		var end_pnt_X	 = 350; 
		var end_pnt_Y	 = 150; 
		
		/* Start a new Path */ 
		context.beginPath();	 
		context.lineWidth=3; 
		
		/* Representing first control point */ 
		context.strokeText( ".", cntrl_pnt_1_X, cntrl_pnt_1_Y); 
		
		/* Representing second control point */ 
		context.strokeText( ".", cntrl_pnt_2_X, cntrl_pnt_2_Y); 
		
		/* Starting point of the curve */ 
		context.moveTo(start_pnt_X, start_pnt_Y); 
		context.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y, 
			cntrl_pnt_2_X, cntrl_pnt_2_Y, end_pnt_X, end_pnt_Y); 
		
		/* Drawing line on the canvas */ 
		context.stroke(); 
	</script> 
</body> 
</html>

例2

<!DOCTYPE html> 
<html> 
<head> 
	<title> 
		Drawing a fish using Bezier Curve 
	</title> 
</head> 
<body> 
	<canvas id="CanvasOfGeeks" width="400" height="200"
			style="border:solid 4px green"> 
	
	<script> 
		var c = document.getElementById("CanvasOfGeeks"); 
		var context = c.getContext("2d"); 
		
		/* Start a new Path */ 
		context.beginPath(); 
		context.lineWidth=3; 
			
		/* Upper curve of the fish, from mouth to tail */ 
		context.moveTo(60, 120); 
		context.bezierCurveTo(90, 30, 200, 130, 310, 55); 
			
		/* Lower curve of the fish, from mouth to tail */ 
		context.moveTo(60, 120); 
		context.bezierCurveTo(90, 170, 200, 110, 310, 160); 
			
		/* Upper half of tail */ 
		context.moveTo(310, 55); 
		context.quadraticCurveTo(320, 80, 280, 110); 
			
		/* lower half of tail */ 
		context.moveTo(310, 160); 
		context.quadraticCurveTo(320, 120, 280, 110); 
			
		/* Eye of the fish */ 
		context.moveTo(100, 100); 
		context.arc(100, 100, 5, 0, 2*Math.PI); 
			
		/* Mouth of the fish */ 
		context.moveTo(60, 120); 
		context.lineTo(80, 120); 
		context.stroke(); 
	</script> 
</body> 
</html>

效果

本文链接:http://it72.com/12628.htm