全部文章

利用微信小程序 绘图 API 绘制圆形图像到画布 (Canvas)

// wxml
// <canvas class="canvas" canvas-id="canvas" style="width:256px;height:256px;"></canvas>


Page({
    data: {},
    onLoad: function () {
        var image = 'https://cdn.asilu.com/images/icon/map.png';
        var ctx = wx.createCanvasContext('canvas');

        // 画背景图
        ctx.drawImage(image, 0, 0, 256, 256);

        // 圆形位置 大小
        var x = 120, y = 130, size = 60;

        ctx.save(); // 保存
        ctx.beginPath(); // 开始绘制
        ctx.arc(size / 2 + x, size / 2 + y, size / 2, 0, Math.PI * 2, false);
        ctx.clip();

        ctx.drawImage(image, x, y, size, size)

        // 恢复之前保存的绘图上下文
        ctx.restore();

        ctx.draw()
    },
})