キャンバスラインのプロパティの詳細な説明

値: butt (デフォルト値)、round、square

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.drawingStyle=#005588;//3 つの beginpath() で 3 本の平行線を描画 context.beginPath();context.moveTo(100,200);co ntext.lineTo(700,200);context.lineCap=butt;context.ストローク();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap=roun d;context.ストローク();context.beginPath();context.moveTo(100,600);context.lineTo(700,600);context.lineCap=square;context.ストローク();//baselinecontext.li neWidth=1;context.ストロークスタイル=#27a;context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.ストローク();

アニメーションに Round を使用する場合、lineCap の効果は接続部分ではなく、線分の始点と終点でのみ使用できます。

lineCap=square を使用すると、線分が閉じているときに完全に閉じることができますが、それでも閉じるには、clothPath() を使用することをお勧めします。

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();context.moveTo(100, 350);context.lineTo(500,350);context.lineTo(500,200);context.lineTo(700,400);context.lineTo(500,600);context.lineTo(500,450);context.lineTo(100,450);context.lineTo(100,350) );// context.closePath(); //推奨 context.lineWidth=10;context.lineCap=square; //推奨しません context.fillStyle= yellow;context.drawingStyle=#058context.fill();context.drawing();

円上の 5 つの角は 360 度を二等分し、それぞれの角度は 72 度、90 度-72 度 = 18 度です。

小さな円の角度は 72° を二等分します、18°+36°=54°

角度をラジアンに換算 - ラジアン = 角度*π/180、つまり (18+i*72)*Math.PI/180

 var Canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//ラジアンへの角度: 180*PIfor( var i=0;i<5;i++){ context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context.ストローク();

関数にカプセル化されます。

 window.onload=function(){ var Canvas=document.getElementById(canvas); var context=canvas.getContext(2d); 150,300,400,400)} 関数drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //角度をラジアンに: 180*PI で除算 for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math) .PI)*R+x, -Math.sin((18+i*72)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x, -Math.sin((54+i*72)/180*Math.PI)*r+y ); } ctx.closePath();

小さい r=80、200、および 400 をそれぞれ変更して、次のグラフィックを取得します。

時計回りの回転パラメータを追加します: rot

 window.onload=function(){ var Canvas=document.getElementById(canvas); var context=canvas.getContext(2d); 150,300,400,400,30);} //Rot時計回りの回転角度関数drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //角度をラジアンに変換: 180*PI で除算 for(var i=0;i<5;i++){ ctx.lineTo( Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI) )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); ctx.closePath(); ctx.ストローク();}

30 度回転する効果は次のとおりです。

1. lineJoin 値

マイター (デフォルト) は常に鋭いコーナー、ベベルマイター、丸いコーナーを表示します。

ベベルはリボンを折り畳んだような効果です。

2. マイター関連の miterLimit 属性

小さい r を 30 に設定し、lineJoin をマイターに設定すると、角が鋭角に拡張されず、ベベル状に表示されます。

 context.lineJoin=miter;drawStar(context,30,300,400,400,30);

なぜ？

context.miterLimit=10 のデフォルト値は 10 であるため、

miterlimit は、lineJoin が miter の場合にのみ有効です。

miterLimit は、線を接続する方法としてマイターが使用されるときに生成される、内隅と外隅の間の距離の最大値を指します。

デフォルト値は 10 で、最大値は 10px です。10px を超えるとベベル モードで表示されます。

内円半径 r を上記の 30 に設定すると、形成される鋭角が非常に鋭くなり、内隅と外隅の間の距離が miterLimit の 10 を超えます。

次に、miterlimit をより大きな値、20 に変更します。効果は次のとおりです。

 context.lineJoin=miter; context.miterLimit=20(context,30,300,400,400,30);

注: miterLimit は白い先端から黒い先端までの距離ではありません。この距離は 20px よりもはるかに大きくなります。

miterLimit が生成されるとき、線には幅が必要です。幅のある線の中央の線の鋭い角は、外側の鋭い角からの直線距離になります。

Canvas の miterLimit 経験値は 10 です。非常に特殊な状況、つまり非常に鋭いコーナーを表現する必要がある場合にのみ、 miterLimit を変更する必要があります。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。