canvas实现星星图案——圆角星星
2018-12-20 本文已影响28人
星星的成长之路
0.前因
最近要用canvas做一个圆角星星图案，类似于这种：
圆角星星
- 画星星容易，画圆角就不容易了o(╥﹏╥)o
- 借鉴了尖角星星的实现方式，用贝塞尔曲线实现了一个
- 尖角星星实现方式：https://www.jianshu.com/p/10e5edb86ac2
- 原理和基础知识点，请翻阅上面那篇尖角星星实现的文章
- canvas小白，在此抛砖引玉，欢迎大家指导~
1.两圆确定一个尖角星星的原理：
两个圆确定一个星星.jpg
2.用到的知识点：
二阶贝塞尔曲线
关于这方面的知识网上已经很多了，不再赘述
用到的知识就下面一张动图
二阶贝塞尔曲线
数学基础知识
角度转弧度
角度/180*Math.PI
外顶点坐标
x: Math.cos( (18+72*i)/180*Math.PI) * R
y: Math.sin((18+72*i)/180*Math.PI) * R
内顶点坐标
x: Math.cos( (54+72*i)/180*Math.PI) * r
y: Math.sin((54+72*i)/180*Math.PI) * r
3.利用以上顶点结合贝塞尔曲线：
1.内圆上的点，可以当做二阶贝塞尔曲线上的P0和P2
2.外圆上的点，可以把它当做拉伸点P1
3.这样得到的就不再是一个尖角三角形，而是一个圆弧
尖角
圆角
4.初步效果图
初步效果
// 画5个圆弧
for (var i = 0; i < 5; i++) {
// 拉伸点 P1(x1, y1)
var x1 = Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R + x;
var y1 = -Math.sin((18 + 72 * i - rot) / 180 * Math.PI) * R + y;
// 起点坐标 P0(x2, y2)
var x2 = Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r + x;
var y2 = -Math.sin((54 + 72 * i - rot) / 180 * Math.PI) * r + y;
// 终点坐标 P2(x3, y3)
var x3 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;
var y3 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
ctx.moveTo(x2, y2);
ctx.quadraticCurveTo(x1, y1, x3, y3);
}
5.本来以为可以了，结果一上色，出现问题了
屏幕快照 2018-12-20 下午2.37.08.png
中间那个五边形是什么鬼？!
想了一下，发现是没有闭合笔触，毕竟我只是循环的画了5个弧线，让他们的位置看起来闭合，实际上并没有真的闭合。
后来我意识到，中间那个五边形，我有每个点的坐标啊，直接画一个五边形填充上同样的颜色不就可以了吗？机智~
// 画五边形
for (var i = 0; i < 5; i++) {
var x1 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;;
var y1 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
ctx.lineTo(x1, y1);
}
中间的五边形
6.合并效果
合并后的效果
统一描边颜色和填充颜色
6.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆角星星</title>
</head>
<body>
<canvas id="tutorial" width="800" height="800"></canvas>
<script>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext("2d");
ctx.lineWidth = 6;
ctx.strokeStyle = "#0090D2";
ctx.fillStyle = "#FF0000";
// （x，y）起点坐标，R 大圆半径， r小圆半径， rot起始旋转角度
var x = 200, y = 200, R = 180, r = 60, rot = 0;
function drawStar(cxt, R, r, x, y, rot) {
cxt.beginPath();
// 画5个圆弧
for (var i = 0; i < 5; i++) {
// 拉伸点 P1(x1, y1)
var x1 = Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R + x;
var y1 = -Math.sin((18 + 72 * i - rot) / 180 * Math.PI) * R + y;
// 起点坐标 P0(x2, y2)
var x2 = Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r + x;
var y2 = -Math.sin((54 + 72 * i - rot) / 180 * Math.PI) * r + y;
// 终点坐标 P2(x3, y3)
var x3 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;
var y3 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
ctx.moveTo(x2, y2);
ctx.quadraticCurveTo(x1, y1, x3, y3);
}
// 画五边形
for (var i = 0; i < 5; i++) {
var x1 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;;
var y1 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
ctx.lineTo(x1, y1);
}
ctx.fill();
cxt.stroke();
}
drawStar(ctx, R, r, x, y, rot)
</script>
</body>
</html>
7.通过调节R和r的值，来得到不同形状的星星
有一些已经不是五角星了，多试试有惊喜~
星星在长胖的路上越走越远~
8.实现尖角星星的还有一篇单独的文章
链接：https://www.jianshu.com/p/10e5edb86ac2
用的方法比较笨拙，大家有更好的方法，请多多指教~
