使用canvas绘制贝塞尔曲线
程序员文章站
2023-12-04 10:03:28
这篇文章主要介绍了使用canvas绘制贝塞尔曲线,包括2次和三次的凡赛尔曲线，非常的详细，推荐个小伙伴。... 14-12-17...
1、二次贝塞尔曲线
quadraticcurveto(cpx,cpy,x,y) //cpx，cpy表示控制点的坐标,x，y表示终点坐标；
数学公式表示如下：
二次方贝兹曲线的路径由给定点p0、p1、p2的函数b（t）追踪：
代码实例：
复制代码
代码如下:<!doctype html>
<html>
<head>
<meta charset="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 charset="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>
</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(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);
context.strokestyle = "red";
context.stroke();
}
</script>
</body>
</html>
代码效果图：
是不是很炫酷的效果。。。html5+canvas真是个好玩的东西，上瘾了。
下一篇： PS制作逼真的皮革效果