アプレットキャンバスの描画および保存

<キャンバスのスタイル= "幅：355px;高さ：528px;背景：#FFFFFF; visibity：隠された;位置：絶対;トップ：-10000px;左：-10000rpx;" キャンバス-ID = "firstCanvas"> 
	
</キャンバス>

　　キャンバスは、スタイルで非表示にすることができますが、それは、ディスプレイを使用することはできません：なし。

JSコード：

onLoad：機能（オプション）{ 
    _this =これを聞かせて、
    CONST CTX = wx.createCanvasContext（ 'firstCanvas'）。
    ctx.setFillStyle（ '＃FFFFFFの'）; 
    ctx.fillRect（0、0、355、528）。
    // _this.drawtouxiang（CTX）; 
    //するvarのpath1 = '/画像/ avatar.png'; 
    VARパス1 = _this.data.touxiang。
    ctx.drawImage（path1,10,15,50,50）。
    VARパス2 = _this.data.newsimg。
    ctx.drawImage（path2,10,80,335,190）。
    VAR PATH3 = _this.data.imgtuijian。
    ctx.drawImage（path3,10,443,66,66）。
    //设置背景颜色
    this.drawText（CTX）; 
    
    // ctx.draw（）; 
    ctx.draw（真、のsetTimeout（関数（）{ 
        }、1000））。

    console.log（CTX）。
  }、

DrawText：機能（CTX）{ 
     // ctx.setFillStyle（ '＃FFFFFFの'）; 
     // ctx.fillRect（0、0、355、528）; 
     //ニック：私は購入したい
     ctx.setFontSize（16）; //フォントサイズ設定
     ctx.setFillStyle（「＃333333を」）; // フォントの色を設定
     ctx.fillTextを（「私は家を買いたい」、75,31）; //フォントの内容を設定し、座標
     あなたがお勧め// 
     ctx.setFontSize（10 ）;       
     ctx.setFillStyle（ '＃596A86'）;    
     ctx.fillText（）、149,31 'をあなたにお勧めします'; 
     //この素晴らしい朗報！是非、私を見てみましょう！
     ctx.setFontSize（13）;       
     ctx.setFillStyle（ '＃999999'）;    
     ctx.fillText（ 'この素晴らしい情報を是非、私が一緒によく見る!!'、75,56）; 
     //！おめでとう南沙資本40万平地の8.0億ドルの在庫！世帯の多数の暴君村
     ctx.setFontSize（18）;       
     CTX。
     //テキストの折り返し
     40万平地のVaRのテキスト=「おめでとう南沙！大資本金8.0億在庫！タイラント世帯の数が多い村「; 
     //新しい行は、3つのライン
     のvarテキスト2 =」おめでとう南沙グランドが資金を提供40万平地の8.0億在庫!! 世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯、お祝い南沙の多数の暴君村！大資本金8.0億4 ...砂！大資本に40万平地の8.0億在庫を活性化！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！世帯の大規模な数に暴君村、おめでとうございます南沙！40万平地の大資本金8.0億在庫！家族の多数の暴君村「; 
     this.dealWords（{ 
         CTX：CTX、//キャンバスコンテキスト
         のfontSize：18、//フォントサイズ
         塗りつぶしスタイル：「＃333333」、
         単語：テキスト、//を処理するために必要テキスト
         のmaxWidthを：325、//テキストの行の最大幅
         X：10、// x軸位置に表示されるテキスト
         、Y：285、//テキストYシャフトの位置を表示する
         MAXLINE 2：//テキストの行数は、最大表示
     ）}; 
     this.dealWords（{ 
             CTX：CTX、//キャンバスコンテキスト
             のfontSize：14、//フォントサイズ
             塗りつぶしスタイル： '＃666666'、
             ワード：テキスト2 、//ワード処理する必要
             325、テキストの//最大幅のライン：のmaxWidth 
             X：位置10に表示される// x軸テキスト
             y軸に表示される位置346、//テキスト：Y 
             MAXLINE：// 3テキストの行の最も番号が表示
     }）; 
     
     ctx.setFontSize（16）; //設定されたフォントサイズ
     ctx.setFillStyle（ '＃333333'）; // 設定されたフォント色
     ctx.fillText（ 'どんな'、91463）; //フォントの内容を設定、座標
     識別//プレスを、より多くのコンテンツ取得
     ctx.setFontSize（14）; //フォントサイズ設定
     ctx.setFillStyle（ '＃999999'をフォントの色設定//;）
     ctx.fillText（「よりエキサイティングなコンテンツのための長押し識別」、91493）を; //フォントの内容を設定、座標
     
 }

画像を保存して[保存]ボタンをクリックします：

あなたは画像を保存する場合は、最初の文字は、マイクロに認可されているかどうかを判断しなければなりません

saveimg：関数（）{ 
    はconsole.log（' 画像を保存]をクリック' ）; 
    LET = この;
     // 配置アルバムのために認可さ
     wx.getSetting（{ 
        成功（RES）{ 
          IF（res.authSetting [！" スコープ。 writePhotosAlbum ' ]）{ 
            wx.authorize（{ 
              スコープ：' scope.writePhotosAlbum " 、
              成功（）{ 
                // ユーザーが同意したアプレットのアルバム機能は、インターフェイスへの後続の呼び出しがwx.saveImageToPhotosAlbum照会ポップしない
                that.saveablumを（）
              }、
            失敗（）{ 
                that.setData（{
                    openauthpop：真
                }）。
              // that.handleSetting（RES）; 
            } 
            }）
          } 他{ 
            that.saveablum（）
          } 
        } 
      }）。    
}、

saveablum：関数（）{ 
     LETのimageWidth = この.data.imageWidth、
     imageHeight = この.data.imageHeight; 
     wx.canvasToTempFilePath（{      // キャンバス生成された画像 
       canvasId：' firstCanvas ' 、
       X：0 、
       Y：0 、
       幅： imageWidth、
       高さ：imageHeight、
       destWidth：imageWidth、      // キャンバスの抽出幅 
       destHeight：imageHeight、    // の採取キャンバス高
       成功：関数（RES）{
           wx.saveImageToPhotosAlbum（{   // アルバムに画像を保存
             filePathに：res.tempFilePath、
             成功：関数（）{ 
               wx.showToast（{ 
                 タイトル：" イメージが成功生成！" 、
                 DURATION：2000 
               }）
             }、
             失敗：機能（）{ 
               
             } 
           }）
       }、
       失敗：機能（RES）{ 
           にconsole.log（RES）; 
       } 
     }）
  }、

ユーザーがアルバムを書面による許可をキャンセルした場合、それが呼び出すためのボタンを与えなければなりません

<ビュークラスWX = "ラップ"：= "{{openauthpop}}" bindtap = "hiddenauthphp" IF> </ビュー> 
<ビュークラス=はWX "をauthpop"：もし= "{{openauthpop}}"> 
	<ビュークラス= "タイトル">警告</ビュー> 
	<ビュークラス= "コンテンツ">若不打开授权、则无法将图片保存在相册中！</ビュー> 
	<ビュークラス= "西安"> </ビュー> 
	<ビュークラス= "BTN"> 
		<ボタンクラス= "BT左" bindtap = "hiddenauthphp">取消</ button>の<ボタンクラス= "BT右"オープン型= "openSetting" = 'handleSetting'>确定</ボタンをbindopensetting > 
	</ビュー> 
</ビュー>
		

　　

.wrap { 
	位置：固定されました。
	左：0; 
	右：0; 
	トップ：0; 
	下：0; 
	背景：RGBA（0,0,0,0.3）。
} 
.authpop { 
	位置：固定されました。
	トップ：30％; 
	左：10％; 
	幅：600rpx。
	高さ：230rpx。
	Zインデックス：1003; 
	背景：#FFFFFF; 
	表示：フレックス。
	フレックス方向：カラム; 
	ALIGN-アイテム：センター; 
	国境半径：30rpx。
} 
.authpop .TITLE { 
	フォントサイズ：36rpx。
	色：＃333333; 
	パディング：10rpx。
	幅：600rpx。
	表示：フレックス。
	正当化-コンテンツ：センター; 
} 
.authpop .content {
	フォントサイズ：20rpx。
	色：＃999999; 
	パディング：5rpx。
	幅：600rpx。
	表示：フレックス。
	正当化-コンテンツ：センター; 
} 
.xian {.authpop 
	幅：500rpxと、
	高さ：1rpx。
	背景：＃f5f5f5; 
	マージントップ：10rpx。
} 
.authpop .btn { 
	ディスプレイ：曲がります。
	幅：600rpx。
	高さ：50rpx。
	パディングトップ：1rpx。
	背景：#FFFFFF; 
} 

.BT ::後{ 
  ボーダー：なし。
} 
.BT { 
  背景色：#FFF。
	境界半径：0。
	幅：49％; 
	パディングトップ：5rpx。
	表示：フレックス。
	正当化-コンテンツ：センター;
}