アプレットの基本的な機能のキャンバス〜

キャンバスキャンバス

すべてのキャンバスの描画には、JavaScriptを実行する必要があります。

WXML :(私たちの次の例の特別声明なし）が繰り返されませテンプレートWXMLとしてこれを使用します

<キャンバスキャンバス-ID = " myCanvas "スタイル= " 国境：固体1pxの; " />

JS :(次の例では、我々はJSでのonLoadを入れます）

CONST CTX = wx.createCanvasContext（' myCanvas ' ）
ctx.setFillStyle（' 赤色' ）
ctx.fillRect（10、10、150、75 ）
ctx.draw（）

ステップ1：描画コンテキストのキャンバスを作成します。

まず第一に、私たちは、キャンバスの描画コンテキストを作成する必要が CanvasContextを。

CanvasContextアプレットが構築されたオブジェクト、いくつかの描画メソッドであります：

const ctx = wx.createCanvasContext('myCanvas')

ステップ2：説明キャンバスをペイントするために、描画コンテキストを使用します

その後、我々はあなたがキャンバスに描きたいものを記述することがあります。

赤にコンテキスト設定の塗りつぶしの色を描画：

ctx.setFillStyle('red')

fillRect(x, y, width, height) 矩形描画方法、充填は、単に赤に設定されています。

ctx.fillRect(10, 10, 150, 75)

第三段階：ペイント

知らせるキャンバスあなただけの説明を策定するコンポーネントを：

ctx.draw()

結果：

座標系

キャンバスは、それらの2次元グリッドです。左上隅の座標です(0, 0)。

前のセクションでは、我々は、このメソッドを使用しました fillRect(0, 0, 150, 75)。

その意味は次のとおりです。左上隅から(0, 0)開始し、描画150 x 75ピクセルの四角形を。

サンプルコード

私たちはできるキャンバスの座標系を観察するために、いくつかのイベントで

<キャンバスキャンバス-ID = " myCanvas " 
  スタイル = " マージン：5pxの;ボーダー：1ピクセル固体＃1 d3d3d3; " 
  bindtouchstart = " 開始" 
  bindtouchmove = " 移動" 
  bindtouchend = " 終了" /> 

<ビュー隠れ=は" {{}隠さ} " >は、
  座標：（{{X}}、{{Y}}） 
</ ビュー> 
ページ（{ 
  データ：{ 
    X：0 、
    Y：0 、
    隠された：真
  }
  スタート（E）{
    この.setData（{ 
      隠れ：偽、
      X：e.touches [ 0 ] .X、
      Y：e.touches [ 0 ] .Y 
    }）
  }、
  ムーブ（E）{ 
    この.setData（{ 
      X：e.touches [ 0 ] .X、
      Y：e.touches [ 0 ] .Y 
    }）
  }、
  端部（E）{ 
    この.setData（{ 
      隠れ：真
    }）
  } 
}）

あなたがキャンバスの上に指を置くと、それは次のようにタッチポイントの座標が表示されます：

徐々に変化

勾配が四角形、円、線、テキストを埋めるために使用することができます。塗りつぶし色が固定未定着ビットカラーであってもよいです。

我々は2つの色のグラデーションの方法を提供します。

createLinearGradient(x, y, x1, y1) 線形グラデーションを作成します
createCircularGradient(x, y, r) 中心から始まるグラデーションを作成します。

我々はグラデーションオブジェクトを作成したら、我々は2色のグラデーションポイントを追加する必要があります。

addColorStop(position, color) 点の位置と色のグラデーションの色を指定するための方法であって、位置は0と1との間に位置しなければなりません。

それは使用することができるsetFillStyle と setStrokeStyle 方法は、勾配を設定するために、次に説明図面。

使用 createLinearGradient()

CONST CTX = wx.createCanvasContext（' myCanvas ' ）

//は線形勾配作成
CONST GRD = ctx.createLinearGradient（0、0、200、0 ）
grd.addColorStop（0、' 赤' ）
grd.addColorStop（1、' 白' ）

// 勾配で塗りつぶし
ctx.setFillStyle（GRD）
ctx.fillRect（10、10、150、80 ）
ctx.draw（）

使用 createCircularGradient()

CONST CTX = wx.createCanvasContext（' myCanvas ' ）

// 円形の勾配作成
CONST GRD = ctx.createCircularGradient（75、50、50 ）
grd.addColorStop（0、' 赤' ）
grd.addColorStop（1、' 白' ）

/ / 勾配で塗りつぶし
ctx.setFillStyle（GRD）
ctx.fillRect（10、10、150、80 ）
ctx.draw（）

。