Canvasの基本原理

6303 ワード
javascript canvas
年がたつと1か月ばかり荒廃した.最近canvasに接触したばかりで、いくつかの概念点を簡単にまとめると、canvasは画素ベースの画像APIであり、svgとの最大の違いはcanvasが再描画する必要があること(canvasがピクチャを削除する際に再描画する必要があるが、SVGは要素ノードを編集することでピクチャを編集することができる)であり、画素描画に基づいて(svgは名前の通りベクトルである)、より詳細な比較markはここで:?SVGとHTML 5のcanvasにはそれぞれどのような利点があり、個人的にはcanvasのAPIも複雑だが、svgはもっと複雑で、囧rzだと思います.以下は私がcanvasに接触する過程で明らかにしなければならない概念点を以下にまとめます.
インフラストラクチャ
canvas要素自体には何の外観もありません.それは空白の画板で、JSに提供されるAPIです.最初にSafariによって導入されました.IE 9の前にいくつかのクラスライブラリを使ってIEの中でcanvasをシミュレートすることができます.ほとんどのAPIはcanvas要素自体で定義されていません.canvas要素自体の属性は通常のHTML要素とあまり違いません.図面APIは、CanvasRenderingContext2Dコード例:


   demo





var canvas = document.getElementById('square')
var ctx = canvas.getContext('2d')//2d      ，  3d          3d  API，  WebGL</code></pre> 
 <h2>           </h2> 
 <p>             ， canvas              (0,0)，                         ，  canvas   “     ”   ，  “     ”                   ，         （            ）    。  <code>rotate</code>    ，             <code>rotate</code>    ，               ，     ，  ，                    (     )?</p> 
 <p>canvas   <code>translate()</code> <code>setTransform()</code>                    。</p> 
 <h3> <code>translate()</code> <code>setTransform()</code>  </h3> 
 <p><code>translate()</code>               。                    “     ”，    ?：</p> 
 <p>     demo     ：</p> 
 <p>   DEMO</p> 
 <p>  ：</p> 
 <pre><code><html>
<head>
<title>   demo</title>
</head>
<body>
<canvas id = 'square' width= 200 heigth=200></canvas>
</body>
<script>
var canvas = document.getElementById('square')
var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.translate(20,20) //translate        
ctx.moveTo(0,0)
ctx.lineTo(100,20)
ctx.stroke()

座標系が変化しない画像の描画:getContext()方法座標を(20,20)に移動して現在の座標系を得た後の描画
これを知るとtranslate()簡単ですが、この方法の影響はデフォルト座標系です.つまり、原点を移動するのではなく、現在の座標系をリセットし、デフォルト座標系に影響を与える新しいデフォルト座標系を定義します.例えば、前のsetTransform()移動した座標の原点(0,0)は初期のデフォルト座標系です.現在translate()この原点(0,0)の座標系に影響しているのか、それとも前のdemoなのか、setTransform()この文を加えると、画像描画は次のようになります.
これはctx.setTransform(1,0.5,-0.5,1,30,10)デフォルト座標系を再定義したためsetTransform()新しいデフォルト座標系に基づいて現在の座標系が得られる.この2つの概念を理解するとcanvasにおける座標系の変換も把握できる.translate()とsetTransform()方法transform()このAPIはやや複雑で、受け入れられるパラメータはsetTransform()(使用transform()直接的に変換構造を得ることができ、transform()などの方法に取って代わることができ、さらに柔軟である)と同様に6つのパラメータであるrotate()座標系変化の原理は、この6つのパラメータと以下の演算を行ったことによって得られる.
x' = ax + cy +e y' = bx + dy +f
この座標系変換はアフィニティ変換(affine transform)とも呼ばれ、この変換に関する栗はこの2つのブログを参考にすることができます:?Html 5 Canvas変換行列と座標変形の関係
パス
経路はすべての図形を描く基礎であり、SVG中setTransform(a,b,c,d,e,f)属性を使うpath・M・Lなどの制御のXML文書とは異なり、canvasがコンテキストオブジェクトを呼び出す方法で経路の描画を完了し、呼び出しA新しい経路を開始し、各経路にサブ経路があり、これらのサブ経路によって図形を成形する.呼び出しbeginPath()後呼び出しbeginPath()ネタパス開始.描画が完了したらMoveTo()クローズパスを使用してクローズ領域を形成すると、closePath()などの方法でその領域を埋めることができます.新しいパスの描画を開始するたびに再度呼び出さなければならないfill()そうでなければ、新しいパスは前のパスのサブパスとして描画され続けます.beginPath()最も単純な直線セグメント経路法と同様に、canvasはlineTo()およびbezierCurveTo()これらの複雑な曲線経路法を提供しており、非常に複雑であるため、一般的にはこの操作は車輪を探して解決すると推定される.
また、キャンバスは、1つのパスの2つのサブパスが交差しない場合(例えば、透かした図形を描く場合)に、パス内にある点があるかパス外にあるかを「ゼロ以外の巻き数の原則」で判断し、充填時にどの領域が充填される必要があるかを区別することに注意してください.
非ゼロ巻き数の原則に関する原理はここを参考にすることができる:mark?ゼロ以外の回転数規則と奇数偶数規則
canvasの画像状態
canvasの属性と方法はオブジェクト向けの属性方法とあまり変わらないが,ここでは画像状態の概念に触れている.canvasでは、quadraticCurveTo()メソッドで複数のコンテキストオブジェクトを取得できません.画像属性はcanvasベースのコンテキストオブジェクトです.つまり、2つの属性を同時に持つことはできません.イメージ的な比喩は、画像の属性がブラシ、太さ、大きさ、色のようなものです.同じ時間に1つのコンテキストオブジェクトしか存在しないため、同じ時間に1本のブラシしか使用できません.この場合、他の画像属性(別のブラシ)が必要な場合は、現在の画像状態を保存し、新しい画像状態を作成することで切り替えるしかありません.
この場合、getContext()とsave()で画像状態を切り替える必要があり、毎回restore()で現在の画像状態が保存され、画像状態には現在の画像属性、現在の座標系、トリミング領域などの情報が含まれる.たとえば、次のdemoは2つの色で線を描きます.
直接demoでコードを修正して画像状態を観察するdemoJSコード:
var canvas = document.getElementById('square')

var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.strokeStyle = "red"
ctx.moveTo(0,0)
ctx.lineTo(100,20)
ctx.stroke()
ctx.save()//        (  )

ctx.beginPath()
ctx.strokeStyle = "blue"
ctx.moveTo(0,0)
ctx.lineTo(100,40)
ctx.stroke()
ctx.restore()//           (  )

ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(100,60)
ctx.stroke()

出力は次のとおりです.
画像のプロパティは次のとおりです.
  • fillStyle
  • font
  • globalAlpha
  • globalCompositeOperation
  • lineCap
  • lineJoin
  • lineWidth
  • miterLimit
  • textAlign
  • textBaseline
  • shadowBlur
  • shadowColor
  • shadowOffsetX
  • shadowOffsetY
  • strokeStyle

    • canvas背景
    一般的な純色バックグラウンドフィルはsave()属性が使用できるが、より複雑なピクチャやグラデーションフィルに関わる場合はfillStyleおよびCanvasPatternオブジェクトが必要となり、CanvasGradient方法で得ることができるcreatPattern()ここで注意したいのは、このAPIが一般的なピクチャだけでなくcanvas要素も代入できることである.たとえば、画面の外に表示されないcanvas要素を挿入します.この2つのAPIの詳細については、ドキュメントを直接参照してください.
    ?CanvasPattern?CanvasGradient
    ピクセルアクション
    画素ベースのcanvasは、単一の画素に対する動作を実現することができ、これもキャンバスの最下位のAPIであり、呼び出しCanvasPatternメソッドによりキャンバス内の元のRGBA画素情報を表すgetImageData()オブジェクトが返され、呼び出しImageDataメソッドにより空のcreatImageData()オブジェクトが作成され、最後ImageData方法処理後の画素をキャンバスに出力する.
    マイクロソフトの良いチュートリアル(Canvasを使ってカラー写真を白黒写真に変える)は、カラー写真を灰白に変える操作を説明しています.RGBの3つの成分を抽出し、計算した後(キー計算文は以下のように)階調変数に再割り当てする原理を使用しています.
    myGray = parseInt((myRed + myGreen + myBlue) / 3);

          // Assign average to red, green, and blue.
          myImage.data[i] = myGray;
          myImage.data[i + 1] = myGray;
          myImage.data[i + 2] = myGray;
    アレイ大振り
    Inputボックスtype=fileで選択したファイルオブジェクトを取得する方法(FileReader)