0
点赞
收藏
分享

微信扫一扫

canvas实现星星图案——尖角星星

0.前因

最近要用canvas做一个星星图案,网上找了一下,发现有现成的代码

懒得看的同学,我下面简单解释一下:(图是从上面链接里面借的~)

1.原理:

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.实现一个大小形状可调的星星代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//设置边框样式以及填充颜色   
ctx.lineWidth = 3;
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";

// (x,y)起始位置 R外圆半径 r小圆半径  rot初始旋转角度
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.通过调节R和r的值,来得到不同形状的星星

6.然鹅,我这边需要圆角版的星星,以上不符合要求....

7.圆角另起一篇文章写吧~

链接:https://www.jianshu.com/p/84a9e1b8e889

举报

相关推荐

0 条评论