畫這兩個圖形的核心就是計算出各個點的坐標喷鸽,然后利用lineTo()方法將各個點連接起來鹰霍。
先在body里寫入canvas標簽
<canvas id="canvas" width="800px" height="600px">
瀏覽器不支持
</canvas>
然后建邓,在JS中獲取到畫布筛武,并獲取繪制環(huán)境:
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();