Explication détaillée des bases du canevas du mini programme WeChat

L'élément

canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas de HTML5 utilise JavaScript pour dessiner des images 2D sur une page Web. Cet article partage principalement avec vous une explication détaillée des bases du canevas du mini programme WeChat, dans l'espoir d'aider tout le monde.

1. Comprendre la toile

La balise canvas a une largeur par défaut de 300px et une hauteur de 225px.
Le Canvas-id dans la même page ne peut pas être répété. Si vous utilisez un Canvas-ID déjà apparu, le Canvas correspondant à la balise Canvas sera masqué et ne fonctionnera plus correctement.

doit spécifier canvasId. Ce contexte de dessin n'agit que sur le <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;
}

< correspondant. 🎜 >

2. Dessinez des graphiques sur toile

(1). Étapes

wxml :

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

1. Créez un dessin Canvas sur

ci-dessous CanvasContext.

const ctx = wx.createCanvasContext('myCanvas')

2.Décrivons quel contenu dessiner dans Canvas

ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)

3. Tirage au sort

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). Effet

Recommandations associées :

Synthèse JS et toile d'images pour créer des affiches de compte public WeChat

Comment utiliser le canevas pour dessiner des arcs et des cercles

Utilisez le canevas H5 pour créer un effet de barrage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!