HTML 5 canvas線の描画方法

<br>var c=document.getElementById("myCanvas");
<br>var ctx=c.getContext("2d");
<br>//色が互いに影響しないようにパスを再開
<br>ctx.beginPath();
<br>//タッチの色を設定
<br>ctx.strokeStyle="#0000ff";
<br>//開始座標の設定
<br>ctx.moveTo(0,0);
<br>//終了座標の設定
<br>ctx.lineTo(200,100);
<br>//線を引く
<br>ctx.stroke();
<br>//色が互いに影響しないようにパスを再開
<br>ctx.beginPath();
<br>//タッチの色を設定
<br>ctx.strokeStyle="red";
<br>//開始座標の設定
<br>ctx.moveTo(20,30);
<br>//終了座標の設定
<br>ctx.lineTo(100,30);
<br>//context.lineCap="butt|round|square"; 両端の線にデフォルト/円形/四角形のエッジを追加
<br>ctx.lineCap="round";
<br>//context.lineJoin="bevel|round|miter"; 2つの線の終点が交差するコーナーの既定値(斜角)/フィレット/コーナー
<br>ctx.lineJoin="miter";
<br>//線幅の設定
<br>ctx.lineWidth=10;
<br>//線を引く
<br>ctx.stroke();
<br>//塗りつぶし色の設定
<br>ctx.fillStyle="#0000ff";
<br>//フォントスタイルの設定
<br>ctx.font="30px Arial";
<br>//塗りつぶしフォントの描画
<br>ctx.fillText("Hello World",10,50);
<br>//空のフォントを描画
<br>
<br>
<br>
<br>
<br>
3点で1本の折れ線を引く
ctx.beginPath();//タッチの色ctxを設定.strokeStyle="#0000ff";//開始座標ctxを設定.moveTo(0,0);//中間座標ctxを設定.lineTo(100,50);//終了座標ctxを設定.lineTo(200,60);//線を引く
ctx.stroke();
破線を引く
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var xp = 4;//最小長var yp=2;//最小長var beginx=0;//開始横軸var beginy=0;//縦軸var beginz=4;//最初の点横座標var beginw=2;//最初の点縦座標var times=0を開始します.drows(beginx,beginy,beginz,beginw);function drows(x,y,z,w){if(x+xp<200){ctx.lineWidth=2;////ctx.beginPath();////////タッチの色ctx.strokeStyle=「#000 ff」////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////w=w+yp;times++;if(times%2=0){}else{ x=x+xp; y=y+yp; z=z+xp; w=w+yp; times++; } drows(x,y,z,w); }
}
2本の線の角を設定
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//色がctxに影響しないようにパスを再開する.beginPath();//タッチの色ctxを設定.strokeStyle="#0000ff";//開始座標ctxを設定.moveTo(0,0);//終了座標ctxを設定.lineTo(50,60);//線幅ctxを設定.lineTo(200,0);ctx.lineWidth=10;ctx.lineJoin="miter";//線を引く
ctx.stroke();
円または円の点を描く

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();