canvas绘制任意正多边形和五角星

绮见物语婼妍

已于 2023-07-18 14:54:43 修改

阅读量259

点赞数

分类专栏： canvas杂记文章标签：前端 javascript 开发语言

于 2022-11-27 14:03:04 首次发布

本文链接：https://blog.csdn.net/weixin_42254598/article/details/128063722

版权

canvas杂记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<canvas id="dome" width="890px"  height="400px"></canvas>

let dome = document.getElementById('dome').getContext('2d');
// 绘制任意正多边形 n 边形 dx dy中心坐标   size 大小2
function createPolygon(cxt,n,dx,dy,size) {
  cxt.beginPath();
  let degree = (2 * Math.PI) / n;
  for (let i = 0; i < n; i++) {
    let x = Math.cos(i * degree);
    let y = Math.sin(i * degree);
    cxt.lineTo(x * size + dx,y * size + dy);
  }
  cxt.closePath();
}
createPolygon(dome,12,100,75,70)
dome.fillStyle = 'red';
dome.fill()

// 绘制五角星
dome.beginPath();
for (var i = 0; i < 5; i++) {
  dome.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * 50 + 100, -Math.sin((18 + i * 72) * Math.PI / 180) * 50 + 100);
  dome.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * 25 + 100, -Math.sin((54 + i * 72) * Math.PI / 180) * 25 + 100);
}
dome.closePath();
dome.stroke();