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

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 <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;
}

< aus 🎜 >

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('myCanvas');
		ctx.setFillStyle('red');
		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!