29 canvas贝塞尔曲线

最新推荐文章于 2020-10-29 14:30:48 发布

丨Anna丨

最新推荐文章于 2020-10-29 14:30:48 发布

阅读量156

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109354817

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

29 canvas贝塞尔曲线

1 二次贝塞尔曲线

语法

quadraticCurveTo(cp1x, cp1y, x, y)
		绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
		起始点为moveto时指定的点

解析

示例

	<head>
		<meta charset="UTF-8">
		<title>07_绘制圆弧</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(20,20);
				ctx.quadraticCurveTo(20,100,200,20)
				ctx.stroke();
			}
		</script>
	</body>

效果

2 三次贝塞尔曲线

语法

	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
		绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
		起始点为moveto时指定的点

解析

示例

	<head>
		<meta charset="UTF-8">
		<title>09_三次贝塞尔曲线</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(20,20);
				ctx.bezierCurveTo(20,100,100,0,200,200)
				ctx.stroke();
			}
		</script>
	</body>

效果

丨Anna丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
29 canvas贝塞尔曲线

29 canvas贝塞尔曲线1二次贝塞尔曲线语法quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。起始点为moveto时指定的点解析示例 <head> <meta charset="UTF-8"> <title>07_绘制圆弧</title> <style> #test{ position: .
复制链接

扫一扫