Detailed explanation of the basics of WeChat mini program canvas

The canvas element is used to draw graphics on web pages. HTML5's canvas element uses JavaScript to draw 2D images on a web page. This article mainly shares with you a detailed explanation of the basics of WeChat mini program canvas, hoping to help everyone.

1. Understand canvas

## The canvas tag has a default width of 300px and a height of 225px. The canvas-id in the same page cannot be repeated. If you use a canvas-id that has already appeared, the canvas corresponding to the canvas tag will be hidden and will no longer work properly.

You need to specify canvasId. This drawing context only acts on the corresponding 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. Draw graphics in canvas

(1). Steps

wxml:

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

1. Create a Canvas drawing on

The following CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2. Let’s describe what content is to be drawn in Canvas

ctx.setFillStyle('red')

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

3. Draw

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

related suggestion:

js and canvas synthesize pictures to make WeChat public account posters

# #How to use canvas to draw arcs and circles

Use H5 canvas to create barrage effects

The above is the detailed content of Detailed explanation of the basics of WeChat mini program canvas. For more information, please follow other related articles on the PHP Chinese website!