<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 获取 canvas 画布 * 获取 canvas 绘图上下文环境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * 绘制一片星空 */ cxt.fillStyle = 'black'; cxt.fillRect(0, 0, canvas.width, canvas.height); for(var i = 0; i <= 300; i++){ var fiveStart = {}; fiveStart.bigRadius = Math.random()*6+6; fiveStart.smallRadius = fiveStart.bigRadius/2.0; fiveStart.offsetX = Math.random()*canvas.width; fiveStart.offsetY = Math.random()*canvas.height; fiveStart.RotationAngle = Math.random()*360; console.log(fiveStart); drawFiveStar(cxt, fiveStart); } /** * 绘制五角星的方法 */ function drawFiveStar(cxt, fiveStart){ cxt.beginPath(); var x = 0, y = 0; for(var i = 0; i < 5; i++){ x = Math.cos((18+72*i-fiveStart.RotationAngle)/180*Math.PI); x = x*fiveStart.bigRadius+fiveStart.offsetX; y = -Math.sin((18+72*i-fiveStart.RotationAngle)/180*Math.PI); y = y*fiveStart.bigRadius+fiveStart.offsetY; cxt.lineTo(x,y); x = Math.cos((54+i*72-fiveStart.RotationAngle)/180*Math.PI); x = x*fiveStart.smallRadius+fiveStart.offsetX; y = -Math.sin((54+i*72-fiveStart.RotationAngle)/180*Math.PI); y = y*fiveStart.smallRadius+fiveStart.offsetY; cxt.lineTo(x,y); } cxt.closePath(); cxt.lineWidth = 3; cxt.strokeStyle = "#FD5"; cxt.fillStyle = 'yellow'; cxt.lineJoin = "round"; cxt.fill(); cxt.stroke(); } </script>
