对书上代码的理解。
canvas画线条、矩形就不讲了,现在要画正多边形。正多边形都有一个外接圆,圆心和半径被认为是正多边形的中心和大小,如下图的O(dx, dy)和size,这两个变量就是函数的传入参数。正多边形的第一个顶点从x正半轴开始逆时针画,如下图的A点到B点到C点的顺序。利用正多边形的圆心角相等的性质,利用循环按照逆时针的顺序求出各个顶点坐标,求法就是借助角度和三角函数算出x坐标和y坐标。
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var cnv = document.getElementById("canvas");
var cxt = cnv.getContext("2d");
//调用自定义的方法createPolygon()
createPolygon(cxt, 6, 100, 75, 50);
}
/*
* n:表示n边形
* dx、dy:表示n边形中心坐标
* size:表示n边形外接圆的半径
*/
function createPolygon(cxt, n, dx, dy, size) {
cxt.beginPath();
var degree = (2 * Math.PI )/ n;
for (var i = 0; i < n; i++) {
var x = Math.cos(i * degree);
var y = Math.sin(i * degree);
cxt.lineTo(x * size + dx, y * size + dy);
}
cxt.closePath();
cxt.fillStyle = "HotPink";
cxt.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>