画这两个图形的核心就是计算出各个点的坐标,然后利用lineTo()方法将各个点连接起来。
先在body里写入canvas标签
<canvas id="canvas" width="800px" height="600px">
浏览器不支持
</canvas>
然后,在JS中获取到画布,并获取绘制环境:
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
首先,是正多边形的画法:
var num = 5;
var radius = 200;
//此处以(250,250)为中心
//画正多边形
for (var i =0;i<=num;i++) {
var x = radius*Math.cos(Math.PI/180*360/num*i)+250;
var y = radius*Math.sin(Math.PI/180*360/num*i)+250;
ctx.lineTo(x,y);
}
ctx.stroke();
然后,就是五角星的画法:
ctx.beginPath();
for (var i=0;i <= num;i++) {
var x = radius*Math.sin(Math.PI/180*360/num*i*2)+250;
var y = radius*Math.cos(Math.PI/180*360/num*i*2)+250;
ctx.lineTo(x,y);
}
ctx.fill();