canvas-贝塞尔

最新推荐文章于 2024-03-31 17:17:38 发布

时光无声￡

最新推荐文章于 2024-03-31 17:17:38 发布

阅读量80

点赞数

分类专栏： canvas 文章标签： canvas javascript

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119109472

版权

canvas 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

二次贝塞尔

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(200,200);
				ctx.stroke();
				
				
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.quadraticCurveTo(300,0,200,200);
				ctx.stroke();
			}
		}
		
		
	</script>
</html>

三次贝塞尔

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(0,300);
				ctx.lineTo(300,300);
				ctx.stroke();
				
				
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.bezierCurveTo(300,0,0,300,300,300);
				ctx.stroke();
			}
		}
		
		
	</script>
</html>

时光无声￡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-贝塞尔

二次贝塞尔 quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。起始点为moveto时指定的点必过起始点和结束点<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
复制链接

扫一扫