Dessin de l'API du mini programme WeChat

wx.createContext()

---

Crée et renvoie l'objet de contexte de contexte de dessin.

context

context est simplement un conteneur qui enregistre les appels de méthode et est utilisé pour générer un tableau d'actions qui enregistre le comportement de dessin. le contexte suit <canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>.

// 假设页面上有3个画布
var canvas1Id = 3001;
var canvas2Id = 3002;
var canvas3Id = 3003;

var context = wx.createContext();

[canvas1Id, canvas2Id, canvas3Id].forEach(function (id) {
  context.clearActions();
  // 在context上调用方法
  wx.drawCanvas({
    canvasId: id,
    actions: context.getActions();
  });
});

Liste de méthodes de l'objet contextuel :

setFillStylesetStrokeStylesetShadowsetFontSizesetLineCapsetLineJoinsetLineWidthsetMiterLimit

Détails de la méthode :

scale

Après avoir appelé la méthode scale(), les coordonnées horizontales et verticales du chemin créé par la suite seront mises à l'échelle. Si scale est appelée plusieurs fois, les multiples seront multipliés.

//scale.js
<!--scale.wxml --> <canvas canvas-id="1" />

Page({
  onReady:function(e){
    var context = wx.createContext();
    context.rect(5,5,25,15)
    context.stroke();
    context.scale(2,2); //再放大2倍
    context.rect(5,5,25,15);
    context.stroke();
    context.scale(2,2); //再放大2倍
    context.rect(5,5,25,15)
    context.stroke();
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

rotate

est centré sur l'origine, qui peut être modifiée avec la méthode translation. Faites pivoter l’axe de coordonnées actuel dans le sens des aiguilles d’une montre. Si rotate est appelé plusieurs fois, les angles de rotation seront superposés.

Méthode	Paramètres	Description
getActions	Aucun	Obtenir les actions de dessin stockées sur le contexte actuel
clearActions	Aucun	Effacer les actions de dessin actuellement stockées
Déformation
échelle		Mise à l'échelle des coordonnées horizontales et verticales
rotation		Tournez l'axe des coordonnées dans le sens des aiguilles d'une montre
traduire		à l'origine des coordonnées Zoom
save	Aucun	Enregistre les informations de mise à l'échelle, de rotation et de translation de l'axe de coordonnées actuel
restore	Aucun	Restaurer les informations de mise à l'échelle, de rotation et de translation précédemment enregistrées de l'axe de coordonnées
Draw
clearRect		Effacer les pixels sur la toile dans la zone rectangulaire donnée
fillText		Dessinez le texte rempli sur la toile
drawImage		Dessiner une image sur la toile
remplir	Aucun	Remplir le chemin actuel
trait	Aucun	Tracer le chemin actuel
Chemin
startPath	None	Démarrer un chemin
closePath	None	Fermer un chemin
moveTo		Déplacer le chemin vers le point spécifié dans le canevas sans créer de ligne.
lineTo		Ajoute un nouveau point, puis crée une ligne dans le canevas à partir de ce point jusqu'au dernier point spécifié.
rect		Ajoute un chemin rectangulaire au chemin actuel.
arc		Ajoutez un chemin d'arc au chemin actuel, tracé dans le sens des aiguilles d'une montre.
quadraticCurveTomin
	Définir le style de remplissage
	Définir le style de ligne
	Définir l'ombre
	Définir la taille de la police
	Définir les lignes Le style du point de terminaison
	Définir le style de l'intersection de deux lignes
	Définissez la ligne width
	Définir l'inclinaison maximale

Angle de rotation, en radians

Paramètre	Type	Plage	Description
rotation	Nombre	degrés * Math.PI/180 ;

Exemple de code :

//rotate.js
Page({
  onReady:function(e){
    var context = wx.createContext();
    context.rect(50,50,200,200)
    context.stroke();
    context.rotate(5*Math.PI/180)
    context.rect(50,50,200,200)
      context.stroke();
      context.rotate(5*Math.PI/180)
      context.rect(50,50,200,200)
      context.stroke()

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

translate

Transforme l'origine (0, 0) du système de coordonnées actuel. L'origine par défaut du système de coordonnées est le coin supérieur gauche de la page.

ParamètreTypePlageDescriptionxNombreTraduction des coordonnées horizontales yNombreMontant de la traduction des coordonnées verticales

Exemple de code :

//translate.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.rect(50,50,200,200)
    context.stroke()
    context.translate(50,50)
    context.rect(50,50,200,200)
    context.stroke();

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

---

clearRect

Effacer le contenu sur la toile dans la zone rectangulaire

ParametersTypePortéeDescriptionhauteur

Exemple de code :

//clearrect.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.rect(50,50,200,200)
    context.fill()
    context.clearRect(100,100,50,50)

    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

drawImage

Dessine une image, l'image garde sa taille d'origine.

Nombre		zone rectangulaire La largeur
Nombre		La hauteur de la zone rectangulaire

Parameters	Type	Scope	Description
imageResource	String	Obtenir un chemin de fichier ou une image dans le répertoire du projet	à dessiner via les ressources d'images ChooseImage de
x	Number		coordonnée x du coin supérieur gauche de l'image
y	Number		coordonnée y du coin supérieur gauche de l'image

Exemple :

//drawimage.js
Page({
  onReady:function(e){
    var context = wx.createContext();
    wx.chooseImage({
      success:function(res){
        context.drawImage(res.tempFilePaths[0],0,0)
        wx.drawCanvas({
          canvasId:1,
          actions:context.getActions()
        });
      }
    })
  }
})

fillText

Dessinez du texte rempli sur la toile.

Parameter	Type	Range	Description
text	String		La sortie du texte sur le canevas
x	Nombre		Dessiner du texte Le Position de coordonnées x du coin supérieur gauche
y	Numéro		Position de coordonnées y du coin supérieur gauche du texte dessiné

Exemple de code :

//filltext.js
Page({
  onReady:function(){
    var context = wx.createContext();

    context.setFontSize(14)
    context.fillText("MINA",50,50)
    context.moveTo(0,50)
    context.lineTo(100,50)
    context.stroke();

    context.setFontSize(20)
    context.fillText("MINA",100,100)
    context.moveTo(0,100)
    context.lineTo(200,100)
    context.stroke();
    wx.drawCanvas({
      canvasId:1,
      actions:context.getActions()
    });
  }
})

---

beginPath

Commencez à créer un chemin, vous devez appeler fill ou Stroke pour utiliser le chemin pour remplir ou Stroke. Pour plusieurs réglages tels que setFillStyle、setStrokeStyle、setLineWidth dans le même chemin, le dernier réglage prévaudra.

closePage

Fermer un chemin.

moveTo

Déplace le chemin vers le point spécifié dans le canevas sans créer de ligne.

lineTo

Ajoute un nouveau point à l'emplacement actuel et crée un chemin dans le canevas à partir de ce point jusqu'au dernier point spécifié.

Paramètres	Type	Plage	Description
x	Numéro	y	Numéro
y de la position cible Coordonnées		rect Ajoute un chemin rectangulaire au chemin actuel. arc Ajoute un chemin d'arc au chemin actuel, tracé dans le sens des aiguilles d'une montre. quadraticCurveTo Créez un chemin de courbe de Bézier quadratique. bezierCurveTo Créez un chemin de courbe de Bézier cubique. setFillStyle Définissez un remplissage de couleur unie. "Définir la couleur pour remplir le style" 55, 0, 0)' ou 'rgba( Chaîne de couleur au format 255, 0, 0, 0.6)' ou '#ff0000' définie comme couleur du style de remplissage setStrokeStyle Définissez un trait de couleur unie, les paramètres sont les mêmes que setFillStyle. Exemple de code : //setfillstyle.js Page({   onReady:function(e){     var context = wx.createContext();     context.setFillStyle("#ff00ff");     context.setStrokeStyle("#00ffff");     context.rect(50,50,100,100)     context.fill()     context.stroke()     wx.drawCanvas({       canvasId:1,       actions:context.getActions()     });   } }) setShadow Définissez le style d'ombre. setFontSize Définissez la taille de la police. setLineWidth Définissez la largeur de la ligne. setLineCap Définissez le style du point final de la ligne. setLineJoin Définit le type de coin créé lorsque deux lignes se croisent. setMiterLimit Définissez la longueur d'onglet maximale La longueur d'onglet fait référence à la distance entre les coins intérieur et extérieur à l'intersection de deux lignes. Valable uniquement lorsque setLineJoin est 'miter'. Si la longueur maximale de la pente est dépassée, la connexion sera affichée sous la forme lineJoin bevel Parameter Type Range Description miterLimit Number Longueur maximale de l'onglet Exemple de code : Télécharger //line.js Page({   onReady:function(e){     var context = wx.createContext();     context.setLineWidth(10);     context.setLineCap("round")     context.setLineJoin("miter");     context.setMiterLimit(10);     context.moveTo(20,20);     context.lineTo(150,27);     context.lineTo(20,54);     context.stroke();     context.beginPath();     context.setMiterLimit(3);     context.moveTo(20,70);     context.lineTo(150,77);     context.lineTo(20,104);     context.stroke();     wx.drawCanvas({       canvasId:1,       actions:context.getActions()     });   } }) wx.drawCanvas(OBJECT) Description du paramètre OBJECT : Exemple : Télécharger <!--canvas.wxml--><canvas cavas-id="firstCanvas" /> rrree ← Interface de dessin de l'API de l'applet WeChat (référence) et liste de méthodes Introduction au dessin de l'API de l'applet WeChat (comment dessiner sur Canvas) → soumettre Site Web PHP chinois MaisonCoursArticleQuestions et réponsesDictionnaireManuelTéléchargerrecherche APPTélécharger