Canvas学习笔记(五)--绘图（贝赛尔曲线）

最新推荐文章于 2024-07-12 16:31:27 发布

ice_i_snow

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/ice_i_snow/article/details/84165927

版权

web前端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html5

8 篇文章 0 订阅

订阅专栏

canvas

8 篇文章 0 订阅

订阅专栏

1、二次贝塞尔曲线介绍

quadraticCurveTo(cpx,cpy,x,y)

cpx，cpy表示控制点的坐标；

x，y表示终点坐标；

数学公式表示如下：

二次方贝兹曲线的路径由给定点P₀、P₁、P₂的函数B（t）追踪：

$\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]$

2、二次贝赛尔曲线实例

<!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 = can6.getContext('2d');

				//绘制起始点、控制点、终点
				cxt.beginPath();
				cxt.moveTo(20,170);
				cxt.lineTo(130,40);
				cxt.lineTo(180,150);
				cxt.stroke();

				cxt.strokeStyle = "rgba(255,0,0,1)";

				//绘制2次贝塞尔曲线
				cxt.beginPath();
				cxt.moveTo(20,170);
				cxt.quadraticCurveTo(130,40,180,150);
				cxt.stroke();
	
			}

		}
	</script>
  </head>	
  
  <body οnlοad="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>

代码显示的效果：

3、三次贝赛尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x，cp1y表示第一个控制点的坐标；

cp2x，cp2y表示第二个控制点的坐标；

x，y表示终点的坐标；

数学公式表示如下：

P₀、P₁、P₂、P₃四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P₀走向P₁，并从P₂的方向来到P₃。一般不会经过P₁或P₂；这两个点只是在那里提供方向资讯。P₀和P₁之间的间距，决定了曲线在转而趋进P₃之前，走向P₂方向的“长度有多长”。

$\mathbf{B}(t)=\mathbf{P}_0(1-t)^3+3\mathbf{P}_1t(1-t)^2+3\mathbf{P}_2t^2(1-t)+\mathbf{P}_3t^3 \mbox{ , } t \in [0,1]$

4、三次贝赛尔曲线实例（1）

<!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(25,175);
				cxt.lineTo(60,80);
				cxt.lineTo(150,30);
				cxt.lineTo(170,150);
				cxt.stroke();

				//绘制3次贝塞尔曲线
				cxt.strokeStyle = "rgba(200,0,0,1)";
				cxt.beginPath();
				cxt.moveTo(25,175);
				cxt.bezierCurveTo(60,80,150,30,170,150);
				cxt.stroke();
			}

		}
	</script>
  </head>	
  
  <body οnlοad="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>

代码显示的效果：

5、三次贝赛尔曲线实例（2）

<!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(30,180);
				cxt.lineTo(70,30);
				cxt.lineTo(130,170);
				cxt.lineTo(180,50);
				cxt.stroke();

				cxt.strokeStyle = "rgba(200,0,0,1)";
	
				//绘制3次贝塞尔曲线
				cxt.beginPath();
				cxt.moveTo(30,180);
				cxt.bezierCurveTo(70,30,130,170,180,50);
				cxt.stroke();
			}

		}
	</script>
  </head>	
  
  <body οnlοad="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>

代码显示的效果：

ice_i_snow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习笔记(五)--绘图（贝赛尔曲线）

1、二次贝塞尔曲线介绍 quadraticCurveTo(cpx,cpy,x,y) cpx，cpy表示控制点的坐标； x，y表示终点坐标；数学公式表示如下：二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪： 2、二次贝赛尔曲线实例 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD...
复制链接

扫一扫