Canvas学習ノート(一)

ずっと系統的にcanvasを勉強していませんが、使っている間にgoogleを使いながら、最近仕事のことが一段落したので、MDNについてCanvasを勉強することにしました.
勉強する前に、まずcanvasの背景知識を理解してください.次の内容はMDNから参照されます.
最初にAppleからWebKitが導入され、Mac OS X用のDashboardが導入され、その後SafariやGoogle Chromeで実現された.Firefox 1.5などのGecko 1.8ベースのブラウザでも、この要素はサポートされています.要素はWhatWG Webアプリケーション1.0仕様の一部であり、HTML 5にも含まれる.canvas、中国語の翻訳はキャンバスで、canvasの出現はWeb開発者のために新しい を持ってきて、canvasを利用してもっと面白い、クールな効果を実現することができます.従来はflashに依存していた効果も現在ではcanvasを利用して実現できるようになった.canvasラベルは他のHTMLラベルと同様に、多くの基本的な属性と表現行為を持っている.例えば、id、class及びcssの規則.canvasラベルは、属性width、height、およびcssルールのwidth、heightを同時にサポートします.デフォルトでは、canvasのサイズは300px * 150pxです.canvas要素はCSSを使用してサイズを定義できますが、描画時に画像はフレームサイズに合わせて伸縮します.つまり、CSSのサイズが初期キャンバスのスケールと一致しない場合、歪みが発生します.
描画した画像が歪んでいる場合は、CSSではなく属性に幅と高さを明確に指定してみてください.canvasラベル自体は描画機能を提供しないので、canvasのDOMオブジェクトを直接操作してクールな効果を実現することは期待できません.グラフィックを描画してさまざまな効果を生み出すには、canvasのレンダリングコンテキストオブジェクトを操作する必要があります.canvasは私に白い紙のような感じがします.レンダリングコンテキストは私たちが見つけた絵師です.canvasは絵師に絵を描く場所を提供し、絵師(レンダリングコンテキスト)は美しい絵を紙(canvas)に描く.canvasは、そのレンダリングコンテキストおよびその描画能力を取得する方法getContextを提供する.getContextは、どのような絵師を望んでいるかを示すパラメータを受け入れます.よく使われるのは2種類の2dとwebglです.2dは、平面図を描く能力を持つ絵師を望んでいることを示し、webglは3dの図形を描くことができる絵師を望んでいることを示しています.

var canvas = document.getElementById('canvas'); //   canvas   
var ctx = canvas.getContext('2d'); //   canvas        

レンダリングコンテキストを取得すると、セックスができるようになります!私たちが行ったすべての操作は オブジェクトに確立されています.もしこの がなければ、簡単な長方形を描くことはできません.
次に、簡単な例を見てみましょう.簡単な赤い長方形を描きます.長方形の左上隅は(0,0)、幅は150、高さは100です.
http://codepen.io/YoRolling/p...
未完待機・・・