1.当社のフロントエンドグラフィックス技術います：
チャート：echarts
リアルタイムチャート：キャンバス。
オンライン製図板：魔法猿。
HTML5ゲーム：three.js
2.私はここに焦点を当てるには、キャンバスの図です。
<canvas>は、このようなチャートや他の画像などのタグのカスタムグラフィックスは、あなたは、グラフィックスを描画するためにスクリプトを使用する必要があります。
（キャンバス）で赤色の四角形、勾配矩形、着色矩形、キャンバス上のいくつかの着色テキストを描画します。
HTML5の<canvas>要素は、それは、スクリプト（通常はJavaScript）によって達成され、グラフィックスを描画するために使用されます。
<キャンバス>タグは単なるグラフィカルなコンテナである、あなたは、グラフィックスを描画するためにスクリプトを使用する必要があります。
あなたはパス、ボックス、円、文字、および追加の画像を描画するための種々の方法によってキャンバスを使用することができます。
3.次に、我々はキャンバスを使用する方法を理解するために来ます。
まず、キャンバスを作成する必要があります。<キャンバス> </ canvas>は、キャンバスがセット幅と高さがあるが、我々は我々があるため、外部のスタイルではなく、書き込み=外部スタイルに、書き込みに高いスタイルの幅広い製品ラインを設定することを忘れてはいけません私たちのユニットは、PXである私たちは大きなキャンバスの幅と高さを設定した場合は、キャンバスを育てます、歪むことになる、我々はネット1pxの小さなボックスが表示されます。
4.私たちは、まず、そのキャンバスで、要素は、私たちと同じになっているキャンバスを取得する必要があります。のgetContext （「2D 」）;ブラシを得るために同等であるキャンバスオブジェクトコンテキストを取得します。
四角形を描画：
キャンバスは、私たちの左上隅（0、0）の起源であります
ele.fillRect（X軸、Y軸、幅、高さ）が充填された矩形ele.fillStyle = "色"。
長方形の私達の座標は、私たちの左上隅です
ele.strokeRect（X軸、Y軸、幅、高さ）、中空の長方形のele.strokeStyle = "色"。
私たちの前に置くために私たちの色は、グラフィックスを描画するために書きます
キャンバスパス：
。ELE にbeginPathメソッドを呼び出す（）;これは、開始するために描画する、私たちに伝えると同等です。
私たちのパスは、プロセスライン、側面に相当します
我々はまた始まる（0,0）から座標を指します。
スタート地点：のmoveTo（0,0）;
ターニングポイント：のlineTo（）;これは終わり、旋回点である。これは、より書き込むことができます。
ele.stroke（）;
ele.closePath（）終了
このようなパスは良い引きます。
サークル：
ELE。パスの開始（）。
ele.arc（X、Y、半径、アークスタート、アーク端、時計回りに）真/偽反時計。
ele.stroke（）;白丸。
ele.fill（）;黒丸
テキストを描画：
フォント - フォントを定義します
fillText（テキスト、X、Y） - 固体描かキャンバス上のテキスト
strokeText（テキスト、X、Y） - テキストキャンバス上に中空レンダリング
shadowBlur =「5」シャドウ・セットの曖昧。
shadowColorは= "色"
shadowoffsetXは、xのオフセット距離を=。
shadowoffsetY = Yのオフセット距離。
直線勾配：
// 勾配を作成するvar GRD = CTXを。ザcreateLinearGradientは（0 、0 、200は、0 ）;端の座標に座標を開始
GRD 。addColorStop （0 、" 赤" ）; //オフセットと色
GRD 。addColorStop （1 、" 白" ）。
// 塗りつぶしグラデーション
CTX 。fillStyle = GRD 。
CTX 。fillRect （10 、10 、150 、80 ）。
グラデーション部門
createRadialGradient（75 、50 、5 、90 、60 、100）の座標と半径、開始座標と半径端
画像：
画像を取得します：
VaRのELE =新しいイメージ（）; //はイメージコンテナを作成します
ele.src =「画像パス」。
直接キャンバス上の写真は表示されません。
我々はele.onload =機能を（アップロードするために使用したい画像を作成するには）{
キャンバス。のdrawImage（ELE、X、Y、W、H）//画像、座標、幅と高さ
}
ele.createpattern（絵、 "リピート"）タイル