HTML5のキャンバスタグとは何ですか？

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

getContext("2d") このオブジェクトは、パス、四角形、円、文字を描画し、画像を追加するための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。

キャンバス座標

座標の例

#キャンバス パスキャンバス上に線を描画するには、次の 2 つの方法を使用します。

moveTo(x,y) はラインの開始座標を定義します。
lineTo(x,y) はラインの終了座標を定義します
線を描くには、ストローク() と同じように、「インク」メソッドを使用する必要があります。

例:

開始座標 (0) を定義します。 ,0)、および終了座標 (200,100)。次に、ストローク() メソッドを使用して線を描画します。

HTML コード:

<canvas id="myCanvas" width="200"  style="max-width:90%" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>

javascript コード:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

キャンバスに円を描画します。形状を指定するには、次の JavaScript メソッドを使用します:

context.arc(<i>x</i>,<i>y</i>,<i>r</i>,<i>sAngle</i>,<i>eAngle</i>,<i>counterclockwise</i>);

パラメータ値:

##定義と使用法

#中心: 円弧(100,75,50,0Math.PI,1.5Math.PI)

• 開始角度: 円弧(100,75,50,0,1.5*Math.PI)

• 終了角度: 円弧(100,75,50,0Math.PI,1.5 Math .PI)

• 実際には、円を描画するときに、ストローク() や fill() などの「インク」メソッドを使用します。

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();

  ログイン後にコピー

  (学習ビデオ共有: html ビデオ チュートリアル 、Web フロントエンド )

  以上がHTML5のキャンバスタグとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。