キャンバス要素は、Web ページ上にグラフィックを描画するために使用されます。 HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に 2D 画像を描画します。この記事では主に WeChat ミニ プログラム キャンバスの基本について詳しく説明し、皆様のお役に立てれば幸いです。
1. Canvas を理解する
Canvas タグのデフォルトの幅は 300px、高さは 225px です。
同じページ内の Canvas-ID を重複して使用することはできません。すでに表示されている Canvas-ID を使用すると、Canvas タグに対応する Canvas が非表示になり、正常に動作しなくなります。
この描画コンテキストは、対応する <canvas/>
<!--canvas.wxml--> <view class="container"> <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> </view>
/**canvas.wxss*/ .myCanvas{ border: 1px solid #ccc; width:100%; height:250px; }
2. キャンバスにグラフィックを描画します
(1 ) .手順
wxml:
<canvas canvas-id="myCanvas" clas s="myCanvas" ></canvas>
1.
でキャンバス描画を作成します。コンテキスト
rree
2. Canvas に何を描くかを説明しましょう
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
りー
( 3). 効果
関連する推奨事項: WeChat パブリックアカウントポスター機能を作成するための js とキャンバスの合成画像
方法キャンバスを使用して円弧と円を描画します
以上がWeChatミニプログラムキャンバスの基本を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。