Canvas draws a poster to share, and sets a rounded QR code in the poster

Canvas draws posters to share, set rounded corner QR codes, background images, and dynamic text in the posters, save them as pictures after drawing, and long press to share poster pictures.

Let's take a look at the effect picture: (assuming the teacher's picture is a QR code)

 Among them, the background image element, the picture of the teacher (assuming it is a QR code), and the invitation to follow 0/5, these elements are all realized through the canvas, and the implementation code is as follows:

Please replace the picture with your own, and set the width and height of the canvas to the width and height of the background image, so that it will not be deformed. If you are looking for a location, it is recommended to upload the original picture to Blue Lake, which can accurately locate the elements and realize the painting.

The main difficulty of this article is to draw the picture into rounded corners. The idea is to draw the line first, and then cut the picture according to the drawn rectangle. It is convenient to use and understand by setting several variables.

<template>
	<view class="page">
		<canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas>
		<view class="container">
			<image :src="tempFilePath" mode="widthFix"></image>
		</view>
	</view>
</template>

<script&