使用canvas绘制贝塞尔曲线

更新时间:2023-04-06 15:05:27 阅读：评论：0

1、二次贝塞尔曲线

　　quadraticcurveto(cpx,cpy,x,y)　　//cpx，cpy表示控制点的坐标,x，y表示终点坐标；

数学公式表示如下：

二次方贝兹曲线的路径由给定点p0、p1、p2的函数b（t）追踪：

代码实例：

复制代码代码如下:

<!doctype html>

<html>

<head>

<meta chart=”utf-8″>

<title>canvas直线</title>

<meta name=”keywords” content=””>

<meta name=”author” content=”@my_programmer”>

<style type=”text祝老师教师节快乐的英语/css”>借口作文;

body, h1{margin:0;}

canvas{margin: 20px;}

</style>

</head>

<body onload=”draw()”>

<h1>二次贝塞尔曲线</h1>

<canvas id=”canvas” width=200 height=200 style=”border: 1px solid #ccc;”></canvas>

<script>

function draw() {

var canvas=document.getelementbyid(‘canvas’);

var context=canvas.getcontext(‘2d’);

//绘制起始点、控制点、终点

context.beginpath();

context.moveto(20,170);

context.lineto(130,40);

context.lineto(180,150);

context.stroke(); </p> <p> //绘制2次贝塞尔曲线

context.beginpath();

context.moveto(20,170);

context.quadraticcurveto(130,40,180,150);

context.strokestyle = “red”;

context.stroke();

}

</script>

</body>

</html>

代码效果：

2、三次贝塞尔曲线

　　beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y)　　//cp1x，cp1y表示第一个控制点的坐标,cp2x，cp2y表示第二个控制点的坐标,x，y表示终点的坐标；

数学公式表示如下：

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

代码实例：

复制代码因系统错过填志愿代码如下:

<!doctype html>

<html>

<head>

<meta chart=”utf-8″>

<title>canvas直线</title>

<meta name=”keywords” content=””>

<meta name=”description” content=””>

<style type=”text/css”>

body, h1{margin:0;}

canvas{margin: 20px; }

</style>

</h成都洛带古镇ead>

<body onload=”draw()”>

<h1>三次贝塞尔曲线</h1>

<canvas id=”canvas” width=200 height=200 style=”border: 1px solid #ccc;”></canvas>

<script>

function draw() {

var canvas=document.getelementbyid(‘canvas’);

var context=canvas.getcontext(‘2d’);

//绘制起始点、控制点、终点

context.beginpath();

context.moveto(25,175);

context.lineto(60,80);

context.lineto(150,30);

context.lineto(170,150);

context.stroke(); </p> <p> //绘制3次贝塞尔曲线

context.beginpath();

context.moveto(25,175);

context.beziercurveto(60,80,150,30,170,150);

contex系统还原打不开t.strokestyle = “red”;

context.stroke();

}

</script>

</body>

</html>