Canvas 绘制圆形图片、绘制圆角矩形图片？

 1 <script>
 2     export default {
 3         onLoad() {
 4             uni.showLoading({
 5                 title: ‘我正在努力...‘,
 6                 mask: true
 7             });
 8 
 9             // 开始制作头像
10             this.createPlacard()
11         },
12         methods: {
13             // 开始制作头像
14             createPlacard() {
15                 uni.getImageInfo({
16                     src: ‘https://pic.liesio.com/2020/07/02/e0eb38388da1c.jpg‘, // 网络图片需先下载，得到临时本地路径，否则绘入 Canvas 可能会出现空白
17                     success: (img)=> {
18                         const ctx = wx.createCanvasContext(‘myCanvas‘, this);
19                         ctx.fillStyle = "#FFFFFF";
20                         ctx.fillRect(0, 0, uni.upx2px(750), uni.upx2px(1000));
21                         
22                         // 如何在 Canvas 中绘入圆形图片？
23                         // 原理：利用 Canvas 先画出一个圆形，然后将图片定位到圆形中心位置进行剪切，将超出圆形的部分去掉，就会形成一个圆形
24                         this.circleImgOne(ctx, img.path, uni.upx2px(175), uni.upx2px(95), uni.upx2px(200));
25                         
26                         // 如何在 Canvas 中绘入圆角矩形？
27                         // 原理：利用 Canvas 先画出一个圆角矩形，然后将图片定位到圆角矩形位置进行剪切，将超出圆形的部分去掉，就会形成一个圆角矩形
28                         //this.circleImgTwo(ctx, img.path, uni.upx2px(105), uni.upx2px(95), uni.upx2px(512), uni.upx2px(382), uni.upx2px(20));
29                         
30                         ctx.draw();
31                         uni.hideLoading()
32                     }
33                 })
34             },
35             
36             /*
37             *  参数说明
38             *  ctx Canvas实例
39             *  img 图片地址
40             *   x  x轴坐标
41             *   y  y轴坐标
42             *   r  圆形半径
43             */
44             circleImgOne(ctx, img, x, y, r) {
45                 // 如果在绘制图片之后还有需要绘制别的元素，需启动 save() 、restore() 方法，否则 clip() 方法会导致之后元素都不可见
46                 //    save()：保存当前 Canvas 画布状态
47                 // restore()：恢复到保存时的状态
48                 
49                 /* ctx.save(); */
50                 let d = r * 2;
51                 let cx = x + r;
52                 let cy = y + r;
53                 ctx.arc(cx, cy, r, 0, 2 * Math.PI);
54                 ctx.strokeStyle = ‘#FFFFFF‘; // 设置绘制圆形边框的颜色
55                 ctx.stroke(); // 绘制出圆形，默认为黑色，可通过 ctx.strokeStyle = ‘#FFFFFF‘， 设置想要的颜色 
56                 ctx.clip();
57                 ctx.drawImage(img, x, y, d, d);
58                 /* ctx.restore(); */
59             },
60             
61             /*
62             *  参数说明
63             *  ctx Canvas实例
64             *  img 图片地址
65             *   x  x轴坐标
66             *   y  y轴坐标
67             *   w  宽度
68             *   h  高度
69             *   r  弧度大小
70             */
71             circleImgTwo(ctx, img, x, y, w, h, r) {
72                 // 画一个图形
73                 if (w < 2 * r) r = w / 2;
74                 if (h < 2 * r) r = h / 2;
75                 ctx.beginPath();
76                 ctx.moveTo(x + r, y);
77                 ctx.arcTo(x + w, y, x + w, y + h, r);
78                 ctx.arcTo(x + w, y + h, x, y + h, r);
79                 ctx.arcTo(x, y + h, x, y, r);
80                 ctx.arcTo(x, y, x + w, y, r);
81                 ctx.closePath();
82                 ctx.strokeStyle = ‘#FFFFFF‘; // 设置绘制圆形边框的颜色
83                 ctx.stroke();
84                 ctx.clip();
85                 ctx.drawImage(img, x, y, w, h);
86             }
87         }
88     }
89 </script>