通過對(duì)五角星分析,我們可以確定各個(gè)頂點(diǎn)坐標(biāo)的規(guī)律,這里需要注意的一點(diǎn)是:在canvas中,Y軸的方向是向下的。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- context.beginPath();
-
- for (var i = 0; i < 5; i++) {
- context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
- -Math.sin((18+i*72)/180*Math.PI)*200+200);
- context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
- -Math.sin((54+i*72)/180*Math.PI)*80+200);
- }
- context.closePath();
-
- context.lineWidth="3";
- context.fillStyle = "#F6F152";
- context.strokeStyle = "#F5270B";
- context.fill();
- context.stroke();
-