热搜：编程 Python Microsoft 编程语言 C++

如何使用canvas绘制贝塞尔曲线

发布时间：2023-05-23 05:23:42 来源：互联网

.

纯洁美丽。它化做雪花，用自己洁白的生躯覆盖在大地上。此时，一切都是银装素裹，一副冰清玉洁的模样。光秃秃的树枝上缀满了朵朵洁白的 "梨花 "，风一吹，花儿纷纷飘落，好似一只只银白色的蝴蝶在空中偏偏起舞。 "忽如一夜春风来，千树万树梨花开 "，这句诗不正是赞美冬天的吗？

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真是个好玩的东西，上瘾了。

本文如何使用canvas绘制贝塞尔曲线到此结束。真正的爱，应当超越生命的长度心灵的宽度灵魂的深度。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:

标签： 塞尔