<html> <head> <meta charset=utf-8> <title>绘制简单图形线及矩形</title> <style type="text/css"> canvas{ border: 1px solid #aaa; display: block; margin: 50px auto; } </style> </head> <body> <canvas id="canvas"></canvas> </body><script> var c = document.querySelector("#canvas"); c.width = 800; c.height = 800; //画布 var context = c.getContext("2d"); //五角星的绘制 function drawstar(cxt,r,R,x,y,rot) { context.beginPath(); for( var i = 0; i <5 ;i++) { cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
} cxt.closePath(); cxt.fillStyle="pink"; cxt.lineWidth = 3; cxt.fill(); cxt.stroke();
} drawstar(context,130,200,400,400,60);</script></html>
转载于:https://www.cnblogs.com/angle-xiu/p/11197731.html
相关资源：js canvas绘制五角星的方法