前面《好玩的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>
效果如下:
© 版权声明
本文内容均基于《CC BY-NC-SA 4.0》协议创作或转载,仅供学习和研究使用,不得用于任何商业用途,您可以转载分享,但同时需保留原文链接。
THE END
请我喝怡宝