canvas繪製五角星詳細過程

2022-06-05 23:18:08 字數 698 閱讀 6529

canvas繪製

<


canvas 


id="straight"


>


canvas


>


<


script


>


varcanvas 


=document.getelementbyid(


'straight');


varcontext 


=canvas.getcontext('2d


');script


>
不管是繪製矩形，圓形還是其他的形狀，canvas繪圖都是在畫布上對x,y不同的座標進行定位

畫線條：

context.moveto(10,10);


context.lineto(150,50);線條從（10,10）的位置開始繪製到（150,50）位置結束
同理，五角星可以看成是由10個點有規律的連成的一條線，看圖

在座標軸中，把五角星放在兩個圓形中，通過兩個大小的圓，計算出每個頂點的座標，並連線起來就可以繪製成乙個五角



//js中對應cos，sin的值需要轉換成對應的弧度來進行計算


//以上設定r=150；r=300;水平平移x=500；y=500；旋轉角度rote=30；可以對函式進行封裝，設定不同的值，進行變換


 
Canvas 五角星繪製
效果圖 知識點 1 五角星頂點座標 r cos deg x,r sin deg y 2 畫圓 ctx.arc x,y,r,0,2 math.pi 後兩個引數開始弧度，結束弧度。0表示開始弧度為3點鐘方向，0.5pi為90度。doctype html html head meta charset ut...


OpenGL繪製五角星
include include include gl.h include glut.h 三稜錐的繪製 2016 10 30 vizer pragma comment linker,subsystem windows entry maincrtstartup 隱藏控制台視窗 旋轉引數 static g...


turtle繪製五角星
用turtle 海龜 來繪製乙個五角星吧 操縱海龜繪圖有著許多的命令,這些命令可以劃分為兩種 一種為運動命令，一種為畫筆控制命令 1.運動命令 forward degree 向前移動距離degree代表距離 backward degree 向後移動距離degree代表距離 right degree ...