canvas 画多边形

梦之初 · 发表于 2020-1-13 19:54:26

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

为什么能画出来看不懂
<!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;//为什么这样算可以得出x?
      var y = Math.sin(radian) * length + size / 3 ;//为什么这样算可以得出y?
      context.lineTo(x, y);
}
context.closePath();
context.stroke();
</script>
</html>
————————————————
版权声明：本文为CSDN博主「sysuzjz」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sysuzjz/article/details/53107594

梦之初 · 发表于 2020-1-25 21:42:06

账号		自动登录	找回密码
密码			立即注册

[技术交流] canvas 画多边形

马上注册，结交更多好友，享用更多功能^_^