タグ

ブックマーク / www.html5.jp (4)

  • transform() メソッド - Canvasリファレンス - HTML5.JP

    原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-transform サンプル transform() メソッドは、一度セットされると、それ以降に描かれる図形はすべてその変換マトリックスが適用されます。transform() メソッドで変換マトリックスを定義したあとに、別の変換マトリックスを transform() メソッドで定義すると、2つの変換マトリックスを掛け合わせた変換マトリックスが適用された状態となります。 もし、新たな変換マトリックスを適用したい場合は、setTransform() メソッドで変換マトリックスを定義しなければいけないことに注意してください。 では、まず setTransform() メソッドの使い方をみていきましょう。 setTransform() メソッドの例 このサンプルは、

    karur4n
    karur4n 2019/08/02
  • drawImage() メソッド - Canvasリファレンス - HTML5.JP

    構文 context . drawImage(image, dx, dy) context . drawImage(image, dx, dy, dw, dh) context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) canvas に指定のイメージを描画します。引数は、次のように解釈されます: もし、第 1 引数が img, canvas, video 要素でないなら、TYPE_MISMATCH_ERR 例外を投げます。image にイメージ・データがないなら、INVALID_STATE_ERR 例外を投げます。数値の引数に矛盾があるなら(例えば、描画先が 0 × 0 の矩形)、INDEX_SIZE_ERR を投げます。image が完全にデコードできていないなら、何も描画されません。 仕様 canvas上に画像を表示するには、

    karur4n
    karur4n 2019/07/25
  • さまざまな図形を描く - Canvas - HTML5.JP

    Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形(長方形) 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ

    karur4n
    karur4n 2019/07/25
  • bezierCurveTo() メソッド - Canvasリファレンス - HTML5.JP

    構文 context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 現在のパスに指定の地点を加え、指定の制御点を伴う三次ベジェ曲線を使って、直前の地点に接続します。 仕様 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) メソッドは、(cp1x, cp1y) に対するサブパスを定義しなければいけません。それから、制御点 (cp1x, cp1y) と (cp2x, cp2y) を伴う三次ベジェ曲線を使って、指定の地点 (x, y) へ、サブパスの最終点を接続します。それから、サブパスに地点 (x, y) を加えなければいけません。[BEZIER] 原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-beziercurveto サ

    karur4n
    karur4n 2019/02/09
  • 1