效果图如下:
代码如下:
<!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) +