Canvas学习日志之五-绘制多边形及圆上各点的位置
- 2016-05-28 10:01:20
- 幻音い
- 6555
温馨提示: 这篇文章于3057天前编写,现在可能不再适用或落后.
在学会绘制圆后,会发现Canvas并没有直接提供绘制多边形的方法,由于绘制圆是利用数学公式来实现的,所以我们可以利用三角函数来计算并绘制多边形。
比如绘制一个五边形,首先算出5变形5个点的位置,然后使用lineTo连接起来,在填充即可。
<select id="num" onclick="changeAngle(this)" style="border:1px solid #ccc;color:#444;float:left;">
<script>
for(var i=3;i<=10;i++){
document.write("<option value='"+i+"'>生成"+i+"边形</option>");
}
</script>
</select>
<canvas id="canvas" width="300" height="300" style="display:block;margin:0 auto;border:1px solid #ccc;"></canvas>
``` 获取5个点后,先把存到一个数组里面,然后遍历数组连接线段。
<script>
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
var num = document.getElementById('num').value;
var margin = 100;开始创建
function changeAngle(e){//改变多边形边数
num = e.value;
create();
}
//创建多边形
function create(){
//清除图形
cxt.clearRect(0,0,canvas.width,canvas.height);
var line = [];
for(var i=0;i<num;i++){
//计算角度 = π*2 / 边数 * 第几个位置
var angle = Math.PI*2/num *i;
//将选择的多边形每个点的位置储存到数组 使用数学cos和sin计算角的弧度
line.push([canvas.width/2+Math.cos(angle)*margin,canvas.height/2+Math.sin(angle)*margin]);
}
cxt.beginPath();//开始绘制新的线路
for(var i=0;i<line.length;i++){
cxt.lineTo(line[i][0],line[i][1]);//绘制该多边形的所有点
}
cxt.fill();//填充
cxt.closePath();//关闭线段
}
</script>
```
在线Demo地址:
阁下需要登录后才可以查看评论哦~