キャンバスの説明

1 //検索DOMノード
CONSTキャンバス=のdocument.getElementById（ 'キャンバス'）;
// 2、---ブラシキャンバスコンテキストオブジェクト
CONST CTX = canvas.getContext（ '2D' ）。

// 3、----色のトナーを設定
ctx.fillStyle =「赤」; //塗りつぶし色を設定
//輪郭（境界）色設定; ctx.strokeStyle =「青」

// 4、ラインが配置
ctx.lineWidth = 10; //線幅が設定
=「正方形/ラウンド尻/ ctx.lineCapを //;」 ---ラインエッジ設定が設定されていない、電話円形シェル、カナダの電話シェル
ctx.lineJoin =「マイター/ベベル/ラウンド」; // ---シャープなスタイルのラインが交差する、フラット、ラウンド

// 5、矩形描画-決定領域
ctx.rect（X、Y、W、H）を;
// ctx.fillRect（X、Y、W、H）、次いで、別の色、色の決意領域がなく、直接
/ / ctx.strokeRect（X、Y、W 、H）

// 6、弧を描く
円弧と、角度使用// startAngleのendAngle ----より
---- ---オプションのパラメータをtrueにfalseに初期値時計回り、反時計回り--- // BOOL偽
ctx.arc（X、Y、R、 startAngleの、endAngle [ブール]）

// 7、描画の線は
ctx.moveTo（X、Y）; //塗装を開始する
ctx.lineTo（X1、Y1）を; //はそこに行くために描きます

// 8、ベジェ曲線をプロット
ctx.bezierCurveTo（X0、Y0、CX0、 CY0、X1、Y1）; // 点、制御点、終了点を開始
ctx.quadraticCurveTo（CX1、CY1、X2、 Y2）を; / その出発点として終了点に- /制御点、終了点

// 9、線形勾配
のvar LG = ctx.createLinearGradient（X、Y 、W、H）// 遷移領域を決定
lg.addColorStop（0、 "＃1 F00"）;
lg.addColorStop（1、 "＃FFF"）;
ctx.fillStyle = LG; // ---トナーが調整される勾配
ctx.strokeStyle = LG。

// 10、ラジアル勾配
VAR ctx.createRadialGradient RG =（X0、YO、X1、Y1、R1のR0）
rg.addColorStop（0、 "＃1 F00"）;
rg.addColorStop（1、 "＃FFF"）。
ctx.fillStyle = RG; // ---トナー勾配を調整さ
ctx.strokeStyle = RG。

// 11、画像
ctx.drawImage（IMG、x、y）は // ピクチャIMGが入る
ctx.drawImage（IMG、X、Y、 // W、H）画像がそこに置かIMG、どのくらいの幅と高さ
ctx.drawImage（IMG、X0、Y0、 FW、FH、X、Y、W、H）// IMG取ら、どのくらいの幅と高さ、そこに入れ、採取どの程度、起動します

// 12、描画開始と終了
ctx.beginPathを（）; //描画を再起動---未完成洗浄ブラシ、描画再起動
ctx.closePathを（）; //エンド

// 13、状態の保存と復元
）（ctx.saveを、
ctx.restore（）;

// 14、画像の描画の順番は、画像が画像合成----表示影響
ctx.globalCompositeOperation = typeo
/ **
オリジナルで新しい描画パターン：ソースオーバー（デフォルト）
先オーバー：元のパターンを新しい描画
ソースイン：オリジナルグラフィックと新しいグラフィック交差点、上の新しいグラフィックので、新しいカラーグラフィックカラー表示
ので、元のグラフィックと新しいグラフィック交差点、上の元のグラフィックスを表示：先インを色は元の色グラフィックスで
のみ新たなパターンの非交差部表示：ソースアウト
先アウト：元の非グラフィカル交差点の一部のみを示し、交差点は、部分的に透明---------スクラッチに変換され、
ソース-atop：元のパターンと交差部、新しいグラフィックス、新しいカラーグラフィックの交差部の色を表示する
宛先の上に新しいグラフィック表示との交差部、次の新しいパターン、元のパターンの交差部の色色
、オリジナルのグラフィックと新しいグラフィックスが表示されているカラーオーバーレイ行うの交差部：軽い
XORを：重なる部分が表示されていない
コピーを：唯一の新しいグラフィックスを表示します
* /

// ---充填又はボーダーカラー描画
ctx.fillを（）;
ctx.stroke（）。

キャンバスにプログレスバー静的な弧を描きます

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
  <メタ文字コード= " UTF-8 " > 
  <META NAME = " ビューポート"コンテンツ= " 幅=装置幅、初期の規模= 1.0 " > 
  <メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ" > 
  <タイトル>ドキュメント</ TITLE> 
</ HEAD> 
<BODY> 
  <キャンバスのid = " キャンバス"幅= "500 "高さ= " 500" >お使いのブラウザはキャンバス</キャンバス>サポートしていません
</ BODY> 
  <SCRIPT> constのキャンバス=のdocument.getElementById（' キャンバス' ）
     のconst CTX = canvas.getContext（' 2D ' ）
    ctx.beginPathを（）; 
    CTX。 ARC（100、100、50、0、2、*にMath.PI falseに）; 
    ctx.lineWidth = 15 ; // 描画環 
    ctx.strokeStyle = ' 赤' ; 
    ctx.stroke（）; //
    

    ctx.font = "イタリック30pxマイクロソフトエレガントなブラック";
     // ctx.fillText（ '封筒'、120、100）

    // リング進行描画
    VAR startAngleの=を3 / 2 *にMath.PI; // 位置ラジアン開始
    するvar割合= 50 ;   // 完了進捗値
    VARの diffAngle = PERCENTAGE / 100 * *にMath.PI 2 ; // 完了進行ラジアン
    ctx.beginPath（）; 
    ctx.arc（100、100、50、startAngleの、diffAngle + startAngleの、偽に） ; 
    ctx.strokeStyle = " グリーン" ; 
    ctx.stroke（）; 

    // 绘制文字 
    ctx.fillStyle = ' ＃1 FF0 ' ; 
    ctx.textAlignは = 「センター」。
    ctx.font = ' は24pxのセリフ' ; 
    ctx.fillText（パーセンテージ + ' ％'、100 + 2、100 + 5 ）。
  </スクリプト> 
</ HTML>

おすすめ