Heim  >  Artikel  >  WeChat-Applet  >  Ausführliche Erläuterung der Grundlagen des WeChat Mini-Programm-Canvas

Ausführliche Erläuterung der Grundlagen des WeChat Mini-Programm-Canvas

小云云
小云云Original
2018-03-17 13:56:367674Durchsuche

Das

canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Das Canvas-Element von HTML5 verwendet JavaScript, um 2D-Bilder auf Webseiten zu zeichnen. Dieser Artikel gibt Ihnen hauptsächlich eine detaillierte Erklärung der Grundlagen des WeChat-Miniprogramm-Canvas und hofft, allen zu helfen.

1. Canvas verstehen


Das Canvas-Tag hat eine Standardbreite von 300 Pixel und eine Höhe von 225 Pixel.
Die Canvas-ID auf derselben Seite kann nicht wiederholt werden. Wenn Sie eine bereits angezeigte Canvas-ID verwenden, wird die dem Canvas-Tag entsprechende Leinwand ausgeblendet und funktioniert nicht mehr ordnungsgemäß.

muss CanvasId angeben. Dieser Zeichnungskontext wirkt sich nur auf das entsprechende 9eb6a00f944b38c7333d032ed32cee03

<!--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. Grafiken auf Leinwand zeichnen

(1) Schritte

wxml:

<canvas canvas-id="myCanvas" clas
s="myCanvas" ></canvas>


1. Erstellen Sie eine Canvas-Zeichnung auf

unter CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2.Beschreiben wir, welche Inhalte in Canvas gezeichnet werden sollen

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)

3. Zeichnen

ctx.draw()

(2). Code

//canvas.js 
//获取应用实例  
var app = getApp()  
Page({
	onLoad: function() {
		const ctx = wx.createCanvasContext(&#39;myCanvas&#39;);
		ctx.setFillStyle(&#39;red&#39;);
		ctx.fillRect(10, 10, 150, 75);
		ctx.draw();
	}
})

(3). Wirkung


Verwandte Empfehlungen:

JS- und Canvas-Synthese von Bildern zur Erstellung von WeChat-Postern für öffentliche Accounts

So verwenden Sie die Leinwand zum Zeichnen von Bögen und Kreisen

Verwenden Sie die H5-Leinwand, um einen Sperreffekt zu erzeugen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Grundlagen des WeChat Mini-Programm-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn