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

前言

在 Canvas 中我们常常遇到的一个需求 绘制一个圆形或者一个圆角矩形图像，常用于展示用户头像，我们知道 CSS 有border-radius属性，但是 Canvas 是没有的~😂

很尴尬，我们就来瞅瞅怎么整出一个圆形头像~

Part.1 效果

圆形头像

圆角矩形

Part.2 原理

首先，制作圆形和圆角矩形并不是一个方法，但是都大同小异~

圆形使用的是：arc()

圆角使用的是：arcTo()

圆形：利用 Canvas 先画出一个圆形，然后将图片定位到圆形中心位置进行剪切，将超出圆形的部分去掉，就会形成一个圆形

圆角：利用 Canvas 先画出一个圆角矩形，然后将图片定位到圆角矩形位置进行剪切，将超出圆形的部分去掉，就会形成一个圆角矩形

区别在于，圆角需要我们一段一段的自己画出来，而圆形有现成的方法只用设置想要的值即可

Part.3 代码展示

HTML

1 <template>2<view class="layout">3<view class="layout-header">4 <canvas canvas-id="myCanvas" class="header-canvas"></canvas>5</view>6</view>7 </template>

JS

1 <script>2export default {3 onLoad() {4 uni.showLoading({5 title: '我正在努力...',6 mask: true7 });8 9 // 开始制作头像10 this.createPlacard()11 },12 methods: {13 // 开始制作头像14 createPlacard() {15 uni.getImageInfo({16 src: '//07/02/e0eb38388da1c.jpg', // 网络图片需先下载，得到临时本地路径，否则绘入 Canvas 可能会出现空白17 success: (img)=> {18const ctx = wx.createCanvasContext('myCanvas', this);19ctx.fillStyle = "#FFFFFF";20ctx.fillRect(0, 0, uni.upx2px(750), uni.upx2px(1000));21 22// 如何在 Canvas 中绘入圆形图片？23// 原理：利用 Canvas 先画出一个圆形，然后将图片定位到圆形中心位置进行剪切，将超出圆形的部分去掉，就会形成一个圆形24this.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 30ctx.draw();31uni.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>