canvas 繪製五角星
阿新 • • 發佈：2019-02-01
練習canvas，跟著教材做一個繪製五角星的特效，大家可以複製程式碼在本地檢視效果。
分析：五角星有十個定點，五個外頂點，五個內頂點，可以看成頂點分別在兩個圓上，其中假設外頂點所在圓的半徑為R，內頂點所在圓的半徑為r，畫圖分析可以知道每個頂點在座標中的位置，其中方法drawStar(cxt,r,R,x,y)五個引數分別表示畫布、小圓半徑、大圓半徑、五角星x軸偏移量、y軸偏移量。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>繪製五角星</title> </head> <body> <canvas id="myConvas"></canvas> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("myConvas"); canvas.width=800;//設定畫布的寬度 canvas.height=800;//設定畫布的高度 var context=canvas.getContext("2d"); context.lineWidth=10; drawStar(context,100,200,400,400); } function drawStar(cxt,r,R,x,y){ cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,-Math.sin((18+i*72)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,-Math.sin((54+i*72)/180*Math.PI)*r+y); } cxt.closePath(); cxt.stroke(); } </script> </body> </html>
繪製一片星空： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一片星空</title> </head> <body> <canvas id="myCanvas"></canvas> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("myCanvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){ var r=Math.random()*10+10; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; var a=Math.random()*360; drawStar(context,x,y,r,r/2.0,a); } } function drawStar(cxt,x,y,outerR,innerR,rot){ cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x, -Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y); cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x, -Math.sin((54*i*72-rot)/180*Math.PI)*innerR+y); } cxt.closePath(); cxt.fillStyle="#fb3"; cxt.strokeStyle="#fd5"; cxt.lineWidth=2; cxt.lineJoin="round"; cxt.fill(); cxt.stroke(); } </script> </body> </html>