大家好，我是“前端点线面”，一位新生代农民工，欢迎关注我获取最新前端知识和《前端百题斩》pdf版(包括JS基础篇、浏览器篇、网络篇共计50个章节，5万多字)，此外正在面试的求职者，欢迎将简历发我，免费进行修改^_^。
一、背景
近期在做一个气球挂件的特效需求，值此契机，来跟大家分享一下如何利用canvas以及对应的数学知识构造一个栩栩如生的气球。
二、实现
在实现这个看似是圆鼓鼓的气球之前，先了解一下其实现思路，主要分为以下几个部分：
- 实现球体部分；
- 实现气球口子部分；
- 实现气球的线部分；
- 进行颜色填充；
- 实现动画；
气球.PNG
2.1 球体部分实现
对于这样的气球的球体部分，大家都有什么好的实现思路的？相信大家肯定会有多种多样的实现方案，我也是在看到某位大佬的效果后，感受到了利用四个三次贝塞尔曲线实现这个效果的妙处。为了看懂后续代码，先了解一下三次贝塞尔曲线的原理。（注：引用了CSDN上某位大佬的文章，写的很好,下图引用于此）
三次贝塞尔曲线.gif
在上图中P0为起始点、P3为终止点，P1和P2为控制点，其最终的曲线公式如下所示：
B(t)=(1−t)^3 * P0+3t(1−t)^2 * P1+3t ^ 2(1−t) * P2+t ^ 3P3, t∈[0,1]
上述已经列出了三次贝塞尔曲线的效果图和公式，但是通过这个怎么跟我们的气球挂上钩呢？下面通过几张图就理解了：
image.png
如上图所示，就是实现整个气球球体的思路，具体解释如下所示：
- A图中起始点为p1，终止点为p2，控制点为c1、c2,让两个控制点重合，绘制出的效果并不是很像气球的一部分，此时就要通过改变控制点来改变其外观；
- 改变控制点c1、c2，c1中y值不变，减小x值；c2中x值不变，增大y值（注意canvas中坐标方向即可），改变后就得到了图B的效果，此时就跟气球外观很像了；
- 紧接着按照这个方法就可以实现整个的气球球体部分的外观。
function draw() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(250, 250);
drawCoordiante(ctx);
ctx.save();
ctx.beginPath();
ctx.moveTo(0, -80);
ctx.bezierCurveTo(45, -80, 80, -45, 80, 0);
ctx.bezierCurveTo(80, 85, 45, 120, 0, 120);
ctx.bezierCurveTo(-45, 120, -80, 85, -80, 0);
ctx.bezierCurveTo(-80, -45, -45, -80, 0, -80);
ctx.stroke();
ctx.restore();
}
function drawCoordiante(ctx) {
ctx.beginPath();
ctx.moveTo(-120, 0);
ctx.lineTo(120, 0);
ctx.moveTo(0, -120);
ctx.lineTo(0, 120);
ctx.closePath();
ctx.stroke();
}
2.2 口子部分实现
口子部分可以简化为一个三角形，效果如下所示：
image.png
function draw() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
……
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 120);
ctx.lineTo(-5, 130);
ctx.lineTo(5, 130);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
2.3 线部分实现
线实现的比较简单，就用了一段直线实现
image.png
function draw() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
……
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 120);
ctx.lineTo(0, 300);
ctx.stroke();
ctx.restore();
}
2.4 进行填充
气球部分的填充用了圆形渐变效果，相比于纯色来说更加漂亮一些。
function draw() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = getBalloonGradient(ctx, 0, 0, 80, 210);
……
}
function getBalloonGradient(ctx, x, y, r, hue) {
const grd = ctx.createRadialGradient(x, y, 0, x, y, r);
grd.addColorStop(0, 'hsla(' + hue + ', 100%, 65%, .95)');
grd.addColorStop(0.4, 'hsla(' + hue + ', 100%, 45%, .85)');
grd.addColorStop(1, 'hsla(' + hue + ', 100%, 25%, .80)');
return grd;
}
image.png
2.5 动画效果及整体代码
上述流程已经将一个静态的气球部分绘制完毕了，要想实现动画效果只需要利用requestAnimationFrame函数不断循环调用即可实现。下面直接抛出整体代码，方便同学们观察效果进行调试，整体代码如下所示：
let posX = 225;
let posY = 300;
let points = getPoints();
draw();
function draw() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (posY < -200) {
posY = 300;
posX += 300 * (Math.random() - 0.5);
points = getPoints();
}
else {
posY -= 2;
}
ctx.save();
ctx.translate(posX, posY);
drawBalloon(ctx, points);
ctx.restore();
window.requestAnimationFrame(draw);
}
function drawBalloon(ctx, points) {
ctx.scale(points.scale, points.scale);
ctx.save();
ctx.fillStyle = getBalloonGradient(ctx, 0, 0, points.R, points.hue);
// 绘制球体部分
ctx.moveTo(points.p1.x, points.p1.y);
ctx.bezierCurveTo(points.pC1to2A.x, points.pC1to2A.y, points.pC1to2B.x, points.pC1to2B.y, points.p2.x, points.p2.y);
ctx.bezierCurveTo(points.pC2to3A.x, points.pC2to3A.y, points.pC2to3B.x, points.pC2to3B.y, points.p3.x, points.p3.y);
ctx.bezierCurveTo(points.pC3to4A.x, points.pC3to4A.y, points.pC3to4B.x, points.pC3to4B.y, points.p4.x, points.p4.y);
ctx.bezierCurveTo(points.pC4to1A.x, points.pC4to1A.y, points.pC4to1B.x, points.pC4to1B.y, points.p1.x, points.p1.y);
// 绘制气球钮部分
ctx.moveTo(points.p3.x, points.p3.y);
ctx.lineTo(points.knowA.x, points.knowA.y);
ctx.lineTo(points.knowB.x, points.knowB.y);
ctx.fill();
ctx.restore();
// 绘制线部分
ctx.save();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(points.p3.x, points.p3.y);
ctx.lineTo(points.lineEnd.x, points.lineEnd.y);
ctx.stroke();
ctx.restore();
}
function getPoints() {
const offset = 35;
return {
scale: 0.3 + Math.random() / 2,
hue: Math.random() * 255,
R: 80,
p1: {
x: 0,
y: -80
},
pC1to2A: {
x: 80 - offset,
y: -80
},
pC1to2B: {
x: 80,
y: -80 + offset
},
p2: {
x: 80,
y: 0
},
pC2to3A: {
x: 80,
y: 120 - offset
},
pC2to3B: {
x: 80 - offset,
y: 120
},
p3: {
x: 0,
y: 120
},
pC3to4A: {
x: -80 + offset,
y: 120
},
pC3to4B: {
x: -80,
y: 120 - offset
},
p4: {
x: -80,
y: 0
},
pC4to1A: {
x: -80,
y: -80 + offset
},
pC4to1B: {
x: -80 + offset,
y: -80
},
knowA: {
x: -5,
y: 130
},
knowB: {
x: 5,
y: 130
},
lineEnd: {
x: 0,
y: 250
}
};
}
function getBalloonGradient(ctx, x, y, r, hue) {
const grd = ctx.createRadialGradient(x, y, 0, x, y, r);
grd.addColorStop(0, 'hsla(' + hue + ', 100%, 65%, .95)');
grd.addColorStop(0.4, 'hsla(' + hue + ', 100%, 45%, .85)');
grd.addColorStop(1, 'hsla(' + hue + ', 100%, 25%, .80)');
return grd;
}
················· 执鸢者简介 ·················
你好，我是执鸢者，毕业于华中科技大学，现在是一名百度前端研发工程师，写有多篇原创文章，分享自己在学习中的点滴收获，近期撰写了《前端百题斩》系列文章，内容包括JS基础篇、浏览器篇、网络篇，共计50个章节，5万多字，该文章已帮助很多小伙伴夯实基础，找到心仪的工作。
金九银十求职季，前端点线面助你一臂之力，为广大求职者朋友们提供免费的简历修改服务，走过路过千万不要错过。
识别上方二维码加我微信、拉你进交流群
[1] 五万字前端面试宝典——前端百题斩（上）新鲜出炉