canvas画正六边形

来源：互联网发布：该域名升级访问中编辑：程序博客网时间：2024/06/12 01:41

效果图如下：

代码如下：

<!DOCTYPE html><html><head><title>正六边形</title><meta charset="utf-8"></head><body><canvas id="canvas" width="400" height="400"></canvas></body><script type="text/javascript">var canvas = document.querySelector('#canvas'),context = canvas.getContext('2d');// 定义边长、颜色、边数、canvas大小var length = 100, fillColor = '#000', vertices = 6, size = 1000;canvas.width = size;canvas.height = size;var getDegree = function(vertices, index) {return 360 / vertices * (i + 0.5) + 90;}var getRadian = function(degree) {    return degree * Math.PI / 180;};    context.beginPath();    for (var i = 0; i < vertices; i++) {    // 计算偏转    var degree = getDegree(vertices, i),    radian = getRadian(degree);    // 增加1/3的canvas大小位移量以免被边缘挡住        var x = Math.cos(radian) * length + size / 3;        var y = Math.sin(radian) * length + size / 3 ;        context.lineTo(x, y);    }    context.closePath();    context.stroke();</script></html>

1 0