使用canvas绘制多边形
效果如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><canvas id="canvas" width="800" height="400"></canvas><script>const canvas = document.querySelector('#canvas');c = Context('2d');// 定义一个以x,y为中心，半径为r的规则n边形// 每个顶点都是都是均匀分布在圆周上// 将第一个顶点放置在最上面，或者指定一个角度// 最后一个参数表示是否顺时针function polygon(c, n, x, y, r, angle, counterclockwise) {angle = angle || 0;counterclockwise = counterclockwise || veTo(x + r * Math.sin(angle), y - r * s(angle));let delta = (2 * Math.PI) / n;console.log(delta);for (let i = 1; i < n; i++) {angle += counterclockwise ? -delta : delta;c.lineTo(x + r * Math.sin(angle), y - r * s(angle));}c.closePath();}c.beginPath();polygon(c, 3, 50, 70, 50);polygon(c, 4, 150, 60, 50, Math.PI / 4);polygon(c, 5, 255, 55, 50);polygon(c, 6, 365, 53, 50, Math.PI / 6);polygon(c, 6, 365, 53, 20, Math.PI / 4, true);// 设置属性控制图形的外观// 内部使用灰色c.fillStyle = '#ccc';// 外部使用外边框c.strokeStyle = '#008';c.lineWidth = 5;c.fill();c.stroke();</script></body>
</html>
本文发布于:2024-02-05 02:51:55，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170722309662344.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
