使用canvas绘制冰墩墩(贝塞尔曲线) 精华

发布于 2022-2-16 09:53
浏览
6收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」

前言

一墩难求,一墩难求,冬奥会都过半了,小包的墩还是没有到位,难受~~~感觉小包暂时是无法得到真墩了。没办法,又得拾起老手艺,想方设法绘制个糊弄糊弄自己吧。

由于存在版权问题,所以小包本文就不全程带大家写冰墩墩的代码了,咱们一起在学习一下实现思路。源码地址

学习本文,你可以收获:

  • 理解贝塞尔曲线
  • 学会 canvas 中绘制二阶贝塞尔曲线和三阶贝塞尔曲线的方法
  • 获得冰墩墩各曲线的数据,成功学会绘制冰墩墩

分析

首先我们整体看一下封面图,大致会有两种实现思路。

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

  1. 方案一: 基于 CSS 实现

冰墩墩大部分部位都可以使用 CSS 的椭圆角配合为元素来模拟实现,比如眼睛、防护罩等,但有两个问题。

  • 轮廓实现问题: 小包观摩了大佬们的创意,大佬将冰墩墩进行拆分,将耳朵手臂等部位单独拆分出来,形象化一下冰墩墩,实现的墩墩非常可爱。小包仔细的思考了一下,好像很难有更好的创意了。
  • 椭圆尺寸问题: 小包找到样板后突然发现,如何获取椭圆的半径是个大问题。
  1. 方案二: 基于 canvas 实现

canvas stroke() 方法会实际地绘制出通过 moveTo()lineTo() 等方法定义的路径。

我们找到了绘制曲线的方法,因此冰墩墩的绘制难点集中在如何绘制每条曲线上。

二维数学空间中存在贝塞尔曲线,冰墩墩整体就可以用贝塞尔曲线来绘制。**那什么是贝塞尔曲线那?我们又如何求解出贝塞尔曲线?**下面我们来一起学习一下。

贝塞尔曲线

贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop 等 ———— 百度百科

光看定义感觉这是嘛玩意啊?接下来来看几个案例,了解一下各阶贝塞尔曲线。

贝塞尔曲线根据点的数量可以分为:

  • 一阶贝塞尔曲线 (2 个控制点)

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

  • 二阶贝塞尔曲线 (3 个控制点)

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

  • 三阶贝塞尔曲线 (4 个控制点)

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

  • 四阶贝塞尔曲线 (5 个控制点)

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

  • n阶贝塞尔曲线 (n + 1 个控制点)

跟随着上面的动画,不知道是否对贝塞尔曲线产生了一定的理解?不急下面小包慢慢道来~

贝塞尔曲线中有个重要的参数 t ,取值 [0,1]t 参数的值等于线段上某一个点距离起点的长度除以线段长度。现在对 t 的理解有可能有些空洞,下面我们来具体了解一下。

一阶贝塞尔曲线

一阶贝塞尔曲线包括两个控制点 $P_0$、$P_1$,两控制点连接成线段$P_0$$P_1$。

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

在一阶贝塞尔曲线中,只有一条线段,$t = \frac{P_0^1P_0}{P_0P_1}$,因此随着 t 从 0 -> 1 ,可以绘制出一条直线。

根据几何知识,我们可以求解出一阶贝塞尔曲线的公式为:

$B_1(t) = P_1 + (P_2 - P_1)t, t \in [0,1]$

一阶贝塞尔曲线总结一下就是随着参数t增大,贝塞尔曲线上的点从线段一端移动到另一端

二阶贝塞尔曲线

二阶贝塞尔曲线分别有三个控制点,$P_0$、$P_1$、$P_2$,二阶贝塞尔曲线两条线段 $P_0P_1$、$P_1P_2$。t 参数的值等于线段上某一个点距离起点的长度除以线段长度,且所有的线段上都要满足上述要求,因此 $t = \frac{P_0P_0^1}{P_0P_1} = \frac{P_1P_1^1}{P_1P_2}$,$P_0^1$ 和 $P_1^1$ 构成新的线段,所以根据 $t = \frac{P_0^1P_0^2}{P_0^1P_1^1}$ 值可以求得位于贝塞尔曲线上的点 $P_0^2$

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

根据上面的计算流程,我们可以一步一步推出二阶贝塞尔曲线的公式:

  1. 利用一阶公式在 $P_0P_1$ 上求解出 $P_0^1$,在 $P_1P_2$ 上求出 $P_1^1$

$P_0^1 = (1 - t)P_0 + tP_1$

$P_1^1 = (1 - t)P_1 + tP_2$

  1. 利用一阶公式,在 $P_0^1P_1^1$ 上求解出 $P_0^2$,也就是上述公式代入下列公式中:

$B_2(t) = (1-t)P_0^1 + tP_1^1$
$= (1-t)((1 - t)P_0 + tP_1) + t((1 - t)P_1 + tP_2)$
$= (1-t)^2P_0+2t(1-t)P_1+t^2P_2$

求解出二阶贝塞尔曲线的公式如下:
$B_2(t) = (1-t)^2P_0+2t(1-t)P_1+t^2P_2, t\in [0,1]$

随着参数 t 增大,就可以获得一条图示二阶贝塞尔曲线。

三阶贝塞尔曲线

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

三阶贝塞尔曲线有四个控制点,类似于二阶贝塞尔曲线的求解过程。

  1. 分别在线段 $AB$、$BC$、$CD$ 上去点 $F、G、H$,且 $t = \frac{AF}{AB} = \frac{AF}{AB} = \frac{BG}{BC} = \frac{CH}{CD}$
  2. 点 $F、G、H$ 组成新的线段 $FG、GH$,在两端线段上分别取点 $I、J$,且满足 $t = \frac{FI}{FG} = \frac{GJ}{GH}$
  3. 点 $I、J$ 组成线段 $IJ$,取点 $E$ ,且满足 $t = \frac{IE}{IJ}$
  4. 依次带入公式,可以求得三阶贝塞尔曲线的公式

$B_3(t) = (1-t)^3P_0 + 3t(1-t)^2P_1+3t^2(1-t)P_2+t^3P_3 t \in [0,1]$

$P_0,P_1,P_2,P_3$ 分别代表图中的 $A,B,C,D$

反推贝塞尔曲线控制点

下面只是小包的个人思考过程,数学大佬轻喷。

通过上面的公式推导,我们可以得出每种贝塞尔曲线都有两个固定的控制点——曲线的起始点和终止点。

那么一阶贝塞尔曲线控制点就是起止点

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

二阶贝塞尔曲线控制点分别是起止点及起止点处切线交点

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

三阶贝塞尔曲线有四个控制点,其中两个是起止点。另外两个控制点是起止点处切线及曲线极值点处切线相交点

问题来了,虽然思考出贝塞尔曲线的控制点寻找方法,但小包却没有找到如何求出各段曲线的控制点。那该如何通过上面的算法进行测量那?奈何小包的 PS 水平太差,最终只能参考大佬的测量数据。

膜拜大佬,下面是大佬的测量过程,敬佩大佬。

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

小包将大佬的数据进行汇总,得出下表格:

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

canvas 的贝塞尔曲线方法

实现冰墩墩主要使用两个贝塞尔方法: bezierCurveTo quadraticCurveTo

quadraticCurveTo

quadraticCurveTo 方法用于绘制二阶贝塞尔曲线,使用语法

context.quadraticCurveTo(cpx,cpy,x,y);

cpx/cpy 为控制点的坐标,x/y 为结束点坐标。

二阶贝塞尔曲线共需要三个控制点,因此使用 quadraticCurveTo 会基于当前路径的结束点继续绘制。如果不存在路径,需要使用 beginPath()moveTo() 方法来定义起始点。

使用案例:

// ctx 代表当前 canvas
ctx.moveTo(20,20)
ctx.quadraticCurveTo(20,100,200,20)

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

bezierCurveTo

bezierCurveTo 方法用于绘制三阶贝塞尔曲线,使用语法

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

cpx1/cpy1,cpx2/cpy2 为控制点的坐标,x/y 为结束点坐标。

quadraticCurveTo 方法相同,方法基于当前路径的结束点继续绘制。如果不存在路径,需要使用 beginPath()moveTo() 方法来定义起始点。

使用案例:

ctx.moveTo(20,20)
ctx.bezierCurveTo(20,100,200,100,200,20)

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

冰墩墩绘制

准备工作

由于大佬测量参数太大,因此小包首先对数据做了一下缩放。并封装一下常用函数。

// 缩放参数为3
const SCALE = 3;
// 对测量参数进行缩放
function scaleParam(x) {
  return x / SCALE;
}

// 根据缩放参数封装一下几个函数
function bezierCurveTo(ctx, ...args) {
  ctx.bezierCurveTo(...args.map(scaleParam));
}
function moveTo(ctx, ...args) {
  ctx.moveTo(...args.map(scaleParam));
}
function quadraticCurveTo(ctx, ...args) {
  ctx.quadraticCurveTo(...args.map(scaleParam));
}

轮廓绘制

轮廓绘制非常简单,我们只需按照测量数据,调用 canvas 的贝塞尔曲线绘制方法即可。

ctx.beginPath();
moveTo(ctx, 497, 462);
bezierCurveTo(ctx, 452, 380, 497, 184, 666, 297);
bezierCurveTo(ctx, 792, 255, 921, 261, 1017, 278);
bezierCurveTo(ctx, 1127, 155, 1227, 305, 1183, 404);
bezierCurveTo(ctx, 1208, 443, 1238, 488, 1254, 544);
bezierCurveTo(ctx, 1251, 421, 1503, 398, 1472, 577);
bezierCurveTo(ctx, 1407, 758, 1336, 789, 1279, 876);
bezierCurveTo(ctx, 1270, 924, 1255, 1044, 1147, 1222);
bezierCurveTo(ctx, 1098, 1372, 1211, 1454, 1031, 1457);
bezierCurveTo(ctx, 877, 1469, 892, 1434, 901, 1376);
bezierCurveTo(ctx, 924, 1313, 783, 1324, 802, 1378);
bezierCurveTo(ctx, 822, 1432, 819, 1467, 691, 1469);
bezierCurveTo(ctx, 571, 1473, 569, 1448, 571, 1332);
bezierCurveTo(ctx, 572, 1218, 530, 1226, 464, 1038);
bezierCurveTo(ctx, 386, 1244, 233, 1115, 272, 1017);
bezierCurveTo(ctx, 306, 916, 365, 845, 407, 777);
bezierCurveTo(ctx, 433, 669, 449, 545, 497, 462);
ctx.stroke();

通过上面的代码,我们就可以成功的绘制出墩的轮廓了!!!

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

绘制耳朵

// 冰墩墩左耳朵
ctx.beginPath();
moveTo(ctx, 526, 437);
bezierCurveTo(ctx, 498, 263, 667, 325, 641, 329);
quadraticCurveTo(ctx, 600, 343, 526, 437);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

// 冰墩墩右耳朵
ctx.beginPath();
moveTo(ctx, 1050, 285);
bezierCurveTo(ctx, 1144, 232, 1167, 342, 1162, 387);
quadraticCurveTo(ctx, 1119, 317, 1050, 285);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

绘制冰墩墩小手小脚

// 冰墩墩左手
ctx.beginPath();
moveTo(ctx, 417, 804);
bezierCurveTo(ctx, 430, 837, 435, 914, 457, 968);
bezierCurveTo(ctx, 445, 1016, 440, 1022, 428, 1053);
bezierCurveTo(ctx, 396, 1142, 307, 1112, 304, 1048);
quadraticCurveTo(ctx, 300, 987, 418, 803);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

// 冰墩墩右手
ctx.beginPath();
moveTo(ctx, 1267, 593);
bezierCurveTo(ctx, 1275, 584, 1279, 574, 1280, 555);
bezierCurveTo(ctx, 1282, 448, 1480, 477, 1429, 575);
bezierCurveTo(ctx, 1403, 621, 1374, 689, 1287, 757);
quadraticCurveTo(ctx, 1291, 693, 1267, 594);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

// 冰墩墩左脚
ctx.beginPath();
moveTo(ctx, 585, 1231);
bezierCurveTo(ctx, 626, 1261, 776, 1297, 792, 1336);
bezierCurveTo(ctx, 756, 1387, 838, 1427, 710, 1428);
bezierCurveTo(ctx, 505, 1431, 644, 1381, 585, 1231);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

// 冰墩墩右脚
ctx.beginPath();
moveTo(ctx, 910, 1342);
bezierCurveTo(ctx, 981, 1318, 938, 1293, 1125, 1226);
bezierCurveTo(ctx, 1087, 1370, 1172, 1404, 1014, 1420);
bezierCurveTo(ctx, 875, 1425, 959, 1403, 910, 1342);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

绘制黑眼圈

// 左黑眼圈
ctx.beginPath();
moveTo(ctx, 806, 552);
bezierCurveTo(ctx, 706, 492, 512, 681, 603, 777);
bezierCurveTo(ctx, 738, 882, 896, 600, 806, 552);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

// 右黑眼圈
ctx.beginPath();
moveTo(ctx, 989, 541);
bezierCurveTo(ctx, 1080, 477, 1251, 684, 1168, 768);
bezierCurveTo(ctx, 1077, 837, 893, 607, 989, 541);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();

![dweneyeborder.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202202/954dabf04eb64c9ce0b795ac4eb86a76bf9fc3.png?x-oss-process=image/resize,w_644,h_685)

### 绘制能量圈
```js
// 能量圈
ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "#73fd94";
moveTo(ctx, 497, 772);
bezierCurveTo(ctx, 425, 371, 1145, 80, 1262, 699);
bezierCurveTo(ctx, 1294, 945, 1105, 1031, 907, 1040);
bezierCurveTo(ctx, 716, 1049, 519, 962, 497, 772);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "#f97dfe";
moveTo(ctx, 515, 794);
bezierCurveTo(ctx, 405, 421, 1093, 119, 1242, 646);
bezierCurveTo(ctx, 1316, 881, 1130, 1001, 898, 1003);
bezierCurveTo(ctx, 732, 1005, 562, 961, 515, 794);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 9;
ctx.strokeStyle = "#ecea87";
moveTo(ctx, 611, 909);
bezierCurveTo(ctx, 301, 602, 878, 185, 1137, 487);
bezierCurveTo(ctx, 1495, 981, 840, 1066, 611, 909);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "#9ad6ff";
moveTo(ctx, 611, 909);
bezierCurveTo(ctx, 281, 592, 878, 200, 1137, 487);
bezierCurveTo(ctx, 1495, 1001, 840, 1076, 611, 909);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "#9ad6ff";
moveTo(ctx, 515, 794);
bezierCurveTo(ctx, 405, 421, 1053, 109, 1242, 646);
bezierCurveTo(ctx, 1316, 911, 1150, 1001, 898, 1023);
bezierCurveTo(ctx, 732, 1025, 562, 971, 515, 794);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "#d2fbe5";
moveTo(ctx, 545, 674);
bezierCurveTo(ctx, 673, 289, 1265, 370, 1215, 773);
bezierCurveTo(ctx, 1177, 1083, 453, 1010, 545, 674);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "#4a46be";
moveTo(ctx, 549, 752);
bezierCurveTo(ctx, 548, 421, 1037, 320, 1191, 640);
bezierCurveTo(ctx, 1309, 1058, 597, 1021, 549, 752);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "#b5e7fe";
moveTo(ctx, 549, 752);
bezierCurveTo(ctx, 548, 441, 1057, 300, 1191, 640);
bezierCurveTo(ctx, 1319, 1048, 567, 1021, 549, 752);
ctx.stroke();

使用canvas绘制冰墩墩(贝塞尔曲线)-开源基础软件社区

其余冰墩墩部分绘制都是调用 canvas 的 bezierCurveTo 及 quadraticCurveTo 方法,与上文实现类似,小包就不在文章中重复了,具体可以参考源码或者添加小包索要汇总数据表。

冰墩墩曲线数据来源于: Bulbul

标签
bingdwendwen.zip 2.96K 68次下载
已于2022-2-18 20:25:38修改
10
收藏 6
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐