0.前因
最近要用canvas做一個(gè)星星圖案，網(wǎng)上找了一下敏释，發(fā)現(xiàn)有現(xiàn)成的代碼
http://www.php.cn/html5-tutorial-353336.html
https://www.cnblogs.com/wufangfang/p/6373972.html
這個(gè)鏈接講的很清楚其中的數(shù)學(xué)原理
懶得看的同學(xué)，我下面簡(jiǎn)單解釋一下：（圖是從上面鏈接里面借的~）
1.原理：
兩個(gè)圓確定一個(gè)星星.jpg
2.涉及到的知識(shí)點(diǎn)：
兩個(gè)大小不同的同心圓边器，可以確定一種星星的樣子
角度轉(zhuǎn)弧度
角度/180*Math.PI
外頂點(diǎn)坐標(biāo)
x: Math.cos( (18+72*i)/180*Math.PI) * R
y: Math.sin((18+72*i)/180*Math.PI) * R
內(nèi)頂點(diǎn)坐標(biāo)
x: Math.cos( (54+72*i)/180*Math.PI) * r
y: Math.sin((54+72*i)/180*Math.PI) * r
3.實(shí)現(xiàn)一個(gè)大小形狀可調(diào)的星星代碼：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//設(shè)置邊框樣式以及填充顏色
ctx.lineWidth = 3;
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
// (x,y)起始位置 R外圓半徑 r小圓半徑 rot初始旋轉(zhuǎn)角度
var x = 100, y = 100, R = 100, r = 50, rot = 0;
function drawStar(cxt, R, r, x, y, rot) {
cxt.beginPath();
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R + x, -Math.sin((18 + 72 * i - rot) / 180 * Math.PI) *
R + y);
cxt.lineTo(Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r + x, -Math.sin((54 + 72 * i - rot) / 180 * Math.PI) *
r + y);
}
cxt.closePath();
ctx.fill();
ctx.stroke();
}
drawStar(ctx, R, r, x, y, rot)
4.效果圖
尖角星星
5.通過(guò)調(diào)節(jié)R和r的值赏淌，來(lái)得到不同形狀的星星
有一些已經(jīng)不是五角星了，多試試有驚喜~
環(huán)肥燕瘦框沟，任君挑選??
6.然鵝，我這邊需要圓角版的星星增炭，以上不符合要求....
圓角版星星
