Canvas 快速绘制五角星

凯哥 2020-03-12 13:55:24 2325℃ 1条

前面《好玩的Canvas:直线(线段)、图形的绘制》一文讲述了Canvas绘制直线和矩形,本文将讲述如何绘制五角星,首先在纸上计算推导五角星五个坐标点:
canvas绘制五角星推导
然后我们可以看到五个角坐标规律,下面开始绘制:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas绘制五角星</title> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> </body> <script type="text/javascript"> function get_dom(id){ return document.getElementById(id); } //canavs绘制五角星 //中心点坐标(x0,y0) //m,h五角星中心点到凸角和凹角的长度,使m大小接近于2*h function create_5(cxt,x0,y0,m,h){ var a = 18; var b = 54; cxt.beginPath(); for(i=0;i<5;i++){ cxt.lineTo( m*Math.cos((a+i*72)*Math.PI/180)+x0, m*Math.sin((a+i*72)*Math.PI/180)+y0 ); cxt.lineTo( h*Math.cos((b+i*72)*Math.PI/180)+x0, h*Math.sin((b+i*72)*Math.PI/180)+y0 ); } cxt.closePath(); cxt.stroke(); } var canvas = get_dom("canvas"); var cxt = canvas.getContext("2d"); create_5(cxt,100,100,100,50); </script> </html>

效果如下:
image

标签: HTML

非特殊说明,本博所有文章均为博主原创。

评论啦~



已有 1 条评论