Heim > Artikel > WeChat-Applet > 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 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('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!