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
="utf-8"
>
<
title
>
title
>
<
style
>
*#canvas
span
span:first-of-type
span:last-of-type
pp:first-of-type
p:last-of-type
style
>
head
>
<
body
>
<
canvas 
id="canvas"
>您的瀏覽器不支援
canvas
>
<
span
>54deg
span
>
<
span
>(r*cos(18deg)+x,-r*sin(18deg)+y)
span
>
<
span
>18deg
span
>
<
p>x
p>
<
p>座標原點(0,0)
p>
<
p>y
p>
body
>
<
script
>
varcanvas
=document.getelementbyid(
"canvas");
canvas.width
=400
; canvas.height
=400
; 
varctx
=canvas.getcontext("2d
");//畫五角星
ctx.beginpath();
for(
vari=0
;i<5;i
++)ctx.closepath();
ctx.strokestyle="
#333";
ctx.stroke();
//畫大圓
ctx.beginpath();
ctx.arc(
200,
200,
100,0,
2*math.pi);
ctx.strokestyle="
#ccc";
ctx.stroke();
//畫小圓
ctx.beginpath();
ctx.arc(
200,
200,50,
0,2*
math.pi);
ctx.strokestyle="
#ccc";
ctx.stroke();
//畫對折輔助線
ctx.beginpath();
ctx.moveto(
200,0);
ctx.lineto(
200,
400);
ctx.strokestyle="
#ccc";
ctx.stroke();
ctx.beginpath();
ctx.moveto(0,
200);
ctx.lineto(
400,
200);
ctx.strokestyle="
#ccc";
ctx.stroke();
//圓心到18度頂角的連線
ctx.beginpath();
ctx.moveto(
200,
200);
ctx.lineto(math.cos(18/
180*math.pi)*100+200,
-math.sin(18/
180*math.pi)*100+200);
ctx.strokestyle="
green";
ctx.stroke();
//標出角度1
ctx.beginpath();
ctx.arc(
200,
200,35,
-(18/
180)*math.pi,0);
ctx.strokestyle="
green";
ctx.stroke();
//圓心到54度頂角的連線
ctx.beginpath();
ctx.moveto(
200,
200);
ctx.lineto(math.cos(54/
180*math.pi)*50+200,
-math.sin(54/
180*math.pi)*50+200);
ctx.strokestyle="
red"
; ctx.stroke();
//標出角度2
ctx.beginpath();
ctx.arc(
200,
200,20,
-(54/
180)*math.pi,0);
ctx.strokestyle="
red"
; ctx.stroke();
drawarrow(ctx, 5, 
5, 380,5,
30,5,
5,'#333');
//向右的箭頭
drawarrow(ctx, 5, 
2, 5,
380,30,
5,5,
'#333');
//向下的箭頭
//封裝箭頭函式
function
drawarrow(ctx, fromx, fromy, tox, toy,theta,headlen,width,color) 
script
>
html
>

canvas繪製五角星詳細過程

canvas繪製 canvas id straight canvas script varcanvas document.getelementbyid straight varcontext canvas.getcontext 2d script 不管是繪製矩形，圓形還是其他的形狀，canvas繪圖...

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 ...