ホームページ > WeChat アプレット > ミニプログラム開発 > WeChatミニプログラムキャンバスの基本を詳しく解説

WeChatミニプログラムキャンバスの基本を詳しく解説

小云云
リリース: 2018-03-17 13:56:36
オリジナル
7677 人が閲覧しました

キャンバス要素は、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(&#39;myCanvas&#39;)
ログイン後にコピー
rree 3. Draw

ctx.setFillStyle(&#39;red&#39;)
ログイン後にコピー
(2)。

りー

( 3). 効果

関連する推奨事項: WeChat パブリックアカウントポスター機能を作成するための js とキャンバスの合成画像

方法キャンバスを使用して円弧と円を描画します

H5 キャンバスを使用して弾幕効果を作成します

以上がWeChatミニプログラムキャンバスの基本を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート