Canvas 繪制圓形圖片、繪制圓角矩形圖片？

前言

在 Canvas 中我們常常遇到的一個需求 繪制一個圓形或者一個圓角矩形圖像，常用於展示用戶頭像，我們知道 CSS 有 border-radius 屬性，但是 Canvas 是沒有的~😂 

很尷尬，我們就來瞅瞅怎么整出一個圓形頭像~

Part.1  效果

圓形頭像

 

圓角矩形

 

Part.2  原理

首先，制作圓形和圓角矩形並不是一個方法，但是都大同小異~

圓形使用的是：arc()

圓角使用的是：arcTo()

圓形：利用 Canvas 先畫出一個圓形，然后將圖片定位到圓形中心位置進行剪切，將超出圓形的部分去掉，就會形成一個圓形

圓角：利用 Canvas 先畫出一個圓角矩形，然后將圖片定位到圓角矩形位置進行剪切，將超出圓形的部分去掉，就會形成一個圓角矩形

區別在於，圓角需要我們一段一段的自己畫出來，而圓形有現成的方法只用設置想要的值即可

 

Part.3  代碼展示

HTML

<template>
    <view class="layout">
         <view class="layout-header">
             <canvas canvas-id="myCanvas" class="header-canvas"></canvas>
         </view>
    </view>
</template>

 

JS

<script>
    export default {
        onLoad() {
            uni.showLoading({
                title: '我正在努力...',
                mask: true
            });

            // 開始制作頭像
            this.createPlacard()
        },
        methods: {
            // 開始制作頭像
            createPlacard() {
                uni.getImageInfo({
                    src: 'https://pic.liesio.com/2020/07/02/e0eb38388da1c.jpg', // 網絡圖片需先下載，得到臨時本地路徑，否則繪入 Canvas 可能會出現空白
                    success: (img)=> {
                        const ctx = wx.createCanvasContext('myCanvas', this);
                        ctx.fillStyle = "#FFFFFF";
                        ctx.fillRect(0, 0, uni.upx2px(750), uni.upx2px(1000));

                        // 如何在 Canvas 中繪入圓形圖片？
                        // 原理：利用 Canvas 先畫出一個圓形，然后將圖片定位到圓形中心位置進行剪切，將超出圓形的部分去掉，就會形成一個圓形
                        this.circleImgOne(ctx, img.path, uni.upx2px(175), uni.upx2px(95), uni.upx2px(200));

                        // 如何在 Canvas 中繪入圓角矩形？
                        // 原理：利用 Canvas 先畫出一個圓角矩形，然后將圖片定位到圓角矩形位置進行剪切，將超出圓形的部分去掉，就會形成一個圓角矩形
                        //this.circleImgTwo(ctx, img.path, uni.upx2px(105), uni.upx2px(95), uni.upx2px(512), uni.upx2px(382), uni.upx2px(20));

                        ctx.draw();
                        uni.hideLoading()
                    }
                })
            },

            /*
            *  參數說明
            *  ctx Canvas實例
            *  img 圖片地址
            *   x  x軸坐標
            *   y  y軸坐標
            *   r  圓形半徑
            */
            circleImgOne(ctx, img, x, y, r) {
                // 如果在繪制圖片之后還有需要繪制別的元素，需啟動 save() 、restore() 方法，否則 clip() 方法會導致之后元素都不可見
                //    save()：保存當前 Canvas 畫布狀態
                // restore()：恢復到保存時的狀態

                /* ctx.save(); */
                let d = r * 2;
                let cx = x + r;
                let cy = y + r;
                ctx.arc(cx, cy, r, 0, 2 * Math.PI);
                ctx.strokeStyle = '#FFFFFF'; // 設置繪制圓形邊框的顏色
                ctx.stroke(); // 繪制出圓形，默認為黑色，可通過 ctx.strokeStyle = '#FFFFFF'， 設置想要的顏色
                ctx.clip();
                ctx.drawImage(img, x, y, d, d);
                /* ctx.restore(); */
            },

            /*
            *  參數說明
            *  ctx Canvas實例
            *  img 圖片地址
            *   x  x軸坐標
            *   y  y軸坐標
            *   w  寬度
            *   h  高度
            *   r  弧度大小
            */
            circleImgTwo(ctx, img, x, y, w, h, r) {
                // 畫一個圖形
                if (w < 2 * r) r = w / 2;
                if (h < 2 * r) r = h / 2;
                ctx.beginPath();
                ctx.moveTo(x + r, y);
                ctx.arcTo(x + w, y, x + w, y + h, r);
                ctx.arcTo(x + w, y + h, x, y + h, r);
                ctx.arcTo(x, y + h, x, y, r);
                ctx.arcTo(x, y, x + w, y, r);
                ctx.closePath();
                ctx.strokeStyle = '#FFFFFF'; // 設置繪制圓形邊框的顏色
                ctx.stroke();
                ctx.clip();
                ctx.drawImage(img, x, y, w, h);
            }
        }
    }
</script>

 

CSS

<style lang="scss" scoped>
    .layout {
        .layout-header {
            width: 750upx;
            background:rgba(255,255,255,1);
            .header-canvas {
                width: 750upx;
                height: 700upx;
                box-shadow:0 5upx 16upx 0 rgba(20,104,255,0.07);
            }
        }
    }
</style>