请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
效果
代码
<canvas id="canv" width="400" height="400"></canvas>
<script>
var ctx = canv.getContext('2d');
var size = canv.width / 2, r1 = size - 10, r2 = r1 * 2/5, points = [];
var deg = 0, step = 0.5, mov = true, raf = null;
for(var i = 0; i < 5; i ++) {
var x1 = Math.cos((18 + i * 72) / 180 * Math.PI) * r1 + size,
y1 = -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + size,
x2 = Math.cos((54 + i * 72) / 180 * Math.PI) * r2 + size,
y2 = -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + size;
points.push({x1: x1, y1: y1, x2: x2, y2: y2});
}
var draw5star = () => {
for(var j = 0; j < 5; j++) {
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.moveTo(points[j].x1, points[j].y1);
ctx.lineTo(size, size);
ctx.lineTo(points[j].x2, points[j].y2);
ctx.lineTo(points[j].x1, points[j].y1);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'darkred';
var k = j > 0 ? j - 1 : 4;
ctx.moveTo(points[j].x1, points[j].y1);
ctx.lineTo(size, size);
ctx.lineTo(points[k].x2, points[k].y2);
ctx.moveTo(points[j].x1, points[j].y1);
ctx.fill();
}
};
var rot = () => {
ctx.clearRect(0, 0, canv.width, canv.height);
ctx.save();
ctx.translate(size, size);
ctx.rotate(deg * Math.PI / 180);
ctx.translate(-size, -size);
draw5star();
ctx.restore();
deg = (deg + step) % 360;
mov ? raf = requestAnimationFrame(rot) : cancelAnimationFrame(raf);
};
canv.onclick = () => {
mov = !mov;
rot();
};
rot();
</script>
| 
发表于 2024-5-9 17:26
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-9 17:33
还好从头跟到尾，忘了跟到第几课开始逃学了