<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>畫五角星</title> </head> <body> <canvas id="canvas"></canvas> <script> window.onload=function () { var dom = document.getElementById("canvas"); dom.width = 800; dom.height = 800; var ctx = dom.getContext("2d"); ctx.fillStyle = "black"; ctx.fillRect(0, 0, dom.width, dom.height); for (var i = 0; i < 100; i++) { var r=Math.random()*10+10; var x=Math.random()*dom.width; var y=Math.random()*dom.height; var a=Math.random()*360; drawstar(ctx, x,y,r,r/2.0,a); } } function drawstar(cnt,x,y,R,r,rot) { cnt.beginPath(); for(var i=0;i<5;i++){ cnt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); cnt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); } cnt.closePath(); cnt.fillStyle="#fb3"; cnt.strokeStyle="#f05"; cnt.lineWidth=3; cnt.lineJoin="round"; cnt.fill(); cnt.stroke(); } </script> </body> </html>
canvas五角星
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
2020年上半年數據庫系統工程師考試
基礎知識 ● 下列屬於 CPU 中算術邏輯單元的部件是（1）。 （1）A、程序計數器 B、加法器 C、指令寄存器 D、指令譯碼器 參考答案：（1）B ● 在 CPU 和主存之間設置