lineTo()メソッド

CanvasRenderingContext2D ＞ lineTo()メソッド

内容

　状態:- 　閲覧数:893 　投稿日:2016-09-02 　更新日:2016-09-22 　
現在のサブパスから、引数で指定された座標まで、直線描画指定
・1.現在のパスに指定地点を追加
・2.直前の地点を直線で接続
※lineTo() メソッドは描画指定するだけ。実際には fill() メソッドまたは stroke() メソッドを実行しない限り直線は描画されない

構文
void ctx.lineTo(x, y);

新しい直線を描画する場合
1.beginPath()で現在のパスをリセット
2.moveTo(x, y)でパスの開始座標を指定
3.lineTo(x, y) … サブパスの終点座標を指定
4.stroke()で現在のパスを輪郭表示

開始座標(10, 10)地点から、終了座標(90, 90) 地点へ向けて直線を引く
ctx.beginPath();

ctx.moveTo(10, 10); //開始座標(10, 10)

ctx.lineTo(90, 90); //終了座標(90, 90) 

ctx.stroke();





CanvasRenderingContext2D.lineTo()

コメント投稿(ログインが必要)



類似度ページランキング
順位 ページタイトル抜粋 ％
1 lineTo()メソッド 100
2 fillText()メソッド 77
3 now()メソッド 76
4 moveTo()メソッド 75
5 fill()メソッド 73
6 clear()メソッド 70
7 scale()メソッド 70
8 fillRect()メソッド 69
9 beginPath()メソッド 67
10 setTransform()メソッド 67
11 compileShader()メソッド 65
12 translate() メソッド 64
13 clearColor()メソッド 64
14 bindBuffer()メソッド 64
15 stroke() メソッド 64
16 save()メソッド 64
17 rect()メソッド 64
18 getContext() メソッド 62
19 clearRect()メソッド 59
20 transform()メソッド 59
2025/2/05 12:57 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 clearRect()メソッド | CanvasRenderingContext2D 2
1 moveTo()メソッド(CanvasRenderingContext2D ) カテゴリー 2
1 fillStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 2
2 globalCompositeOperationプロパティ | CanvasRenderingContext2D 1
2 Web Storage | その他 1
2 strokeStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 1
2 WebGLShader 1
2 setItem()メソッド | HTMLStorageオブジェクト 1
2 createShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド | WebGLRenderingContext 1
2 drawArrays()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 遭遇例 ／ 確認例 1
2 shaderSource()メソッド | WebGLRenderingContext 1
2 transform()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 fillText()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 ピクセル | 色 1
2 RGBA | 色 1
2 ImageDataオブジェクト | HTMLCanvasElement 1
2 strokeRect() メソッド | CanvasRenderingContext2D 1
2025/2/5 1:02 更新