<!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'); /** * 徑向漸變 RadialGradient( 小圓圓心橫坐標, 小圓圓心縱坐標, 小圓半徑, 大圓圓心橫坐標, 大圓圓心縱坐標, 大圓半徑 ) */ var radial = cxt.createRadialGradient(500, 300, 0, 500, 300, 300); //創建徑向漸變 radial.addColorStop(0.0, 'yellow'); radial.addColorStop(0.5, 'red'); radial.addColorStop(1.0, 'blue'); cxt.fillStyle = radial; cxt.fillRect(0, 0, 1000, 600); </script>
<!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'); /** * 繪制一片星空 */ var skyStyle = cxt.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height); skyStyle.addColorStop(0.0, '#035'); skyStyle.addColorStop(1.0, 'black'); cxt.fillStyle = skyStyle; cxt.fillRect(0, 0, canvas.width, canvas.height); for(var i = 0; i < 150; i++){ var fiveStart = {}; fiveStart.Radius = Math.random()*6+6; fiveStart.offsetX = Math.random()*canvas.width; fiveStart.offsetY = Math.random()*canvas.height*0.65; fiveStart.RotationAngle = Math.random()*360; drawFiveStar(cxt, fiveStart); } /** * 控制五角星的方法 */ function drawFiveStar(cxt, fiveStart){ cxt.save(); cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相對於原點的偏移量 cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //圖形旋轉(弧度) cxt.scale(fiveStart.Radius, fiveStart.Radius); //圖形縮放( X軸的倍數, Y軸的倍數 ) fiveStartPath(cxt); cxt.fillStyle = "yellow"; cxt.fill(); cxt.restore(); } /** * 繪制標准五角星路徑的方法 */ function fiveStartPath(cxt){ cxt.beginPath(); var x = 0; y = 0; for(var i = 0; i < 5; i++){ x = Math.cos((18+72*i)/180*Math.PI); y = Math.sin((18+72*i)/180*Math.PI); cxt.lineTo(x, 0-y); x = Math.cos((54+72*i)/180*Math.PI)/2.0; y = Math.sin((54+72*i)/180*Math.PI)/2.0; cxt.lineTo(x, 0-y); } cxt.closePath(); } </script>
