<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"); //五角星的绘制 context.fillStyle = "black"; context.fillRect(0,0,800,800); for(var i = 0;i < 200;i++) { context.save(); var r = Math.random()*10+10; var x = Math.random()*c.width; var y = Math.random()*c.height; var rot = Math.random()*360; drawstar(context,r/2,r,x,y,rot); context.restore(); } 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.lineWidth = 3; cxt.fillStyle = "yellow"; cxt.stroke cxt.lineJoin = "round"; cxt.fill(); cxt.stroke(); }</script></html>
转载于:https://www.cnblogs.com/angle-xiu/p/11197670.html
相关资源：JAVA上百实例源码以及开源项目