Detailed Introduction of wxapp Canvas in WeChat Mini Program

WeChat Mini Program wxapp canvas canvas :I recently learned about WeChat Mini Program knowledge, here I record the knowledge of waxpp canvas canvas of WeChat Mini Program:

canvas

Attribute name	Type	Default value	Description
hidden	Boolean	false	Set the display of the canvas/Hidden, the hidden value is true means hidden, and the value is false means displayed
canvas-id	String		The unique identifier of the canvas component
binderror	EventHandle		Trigger the error event when an error occurs, detail = { errMsg: 'something wrong' }

Note:

1.The default width of the canvas tag300px, height225px

2.canvas in the same page-id cannot be repeated, if you use a canvas that has already appeared-id, the canvas element corresponding to this canvas tag will be hidden and will no longer work normally

Example code:Download

<!-- canvas.wxml --">
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- When using absolute positioning, the display level of the canvas behind the document flow is higher than that of the canvas in front--">
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- Because canvas-The id repeats with the previous canvas, and this canvas will not be displayed, and an error event will be sent to AppService --">
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
// canvas.js

Page({
 canvasIdErrorCallback: function (e) {
  console.error(e.detail.errMsg);
 },
 onReady: function (e) {
  //Use wx.createContext to get the drawing context context
  var context = wx.createContext();
  context.setStrokeStyle("#00ff00");
  context.setLineWidth(5);
  context.rect(0,0,200,200);
  context.stroke()
  context.setStrokeStyle ("#ff0000") ;
  context.setLineWidth (2)
  context.moveTo(160,100)
  context.arc(100,100,60,0,2*Math.PI, true);
  context.moveTo(140,100);
  context.arc(100,100,40,0,Math.PI,false);
  context.moveTo(85,80);
  context.arc(80,80,5,0,2*Math.PI, true);
  context.moveTo(125,80);
  context.arc(120,80,5,0,2*Math.PI, true);
  context.stroke();
  //Call wx.drawCanvas, specify the canvas to draw on through canvasId, and specify the drawing behavior through actions
  wx.drawCanvas({
   canvasId: 'firstCanvas',
   actions: context.getActions() //Get the drawing action array
  });
 }
});

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

Basic Tutorial