微信小程序绘制canvas笔记

• 绘制圆形头像（利用网络图片）

    wx.getImageInfo({
      src: 'http://istk-static-files.oss-cn-hangzhou.aliyuncs.com/yk/mp/slogan.png',
      success(res) {
        ctx.save()//保存当前的绘图上下文。
        ctx.beginPath()//开始创建一个路径
        ctx.arc(50, 50, 50, 0, 2 * Math.PI, false)//画一个圆形裁剪区域
        ctx.clip()//裁剪
        ctx.drawImage(res.path, 0, 0, 100, 100)
        ctx.restore()//恢复之前保存的绘图上下文
        ctx.draw()//绘制到canvas
      }
    })

• 保存canvas到相册

wx.canvasToTempFilePath({
          canvasId: 'customCanvas',
          fileType: 'jpg',
          success(res) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success() {
                    wx.showToast({
                      title: '图片保存成功'
                    })
                  }
                })
              }
            })
          }
}, this)

• 绘制圆角矩形

function(context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
    context.save();
    context.setFillStyle("#abc");
    context.setStrokeStyle('#abc')
    context.setLineJoin('round');  //交点设置成圆角
    context.setLineWidth(r);
    context.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
    context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
    context.stroke();
    context.closePath();
    context.draw();
 }

• 造轮子（刻度标尺选择时间）

<template>
    <view class="timeRuler">
      <canvas canvas-id="ruleCanvas" class="ruleCanvas rule"  disable-scroll="false" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
      <canvas class="rule rule-mask" type="webgl" id="ruleMask"></canvas>
    </view>
</template>
<script>
export default {
    props: {
        disabled: Boolean,
        max: {
            type: Number,
            default: 1440
        },
        min: {
            type: Number,
            default: 0
        },
        value: {
            type: Number,
            default: 360
        }
    },
    data () {
        return {
            context: null,
            canvas: null,
            WIDTH: 0,
            HEIGHT: 0,
            requestAnimationFrame: null,
            requestId: 0,
            x: 0,
            isPlay: false,
            path: null,
            minX: 0,
            maxX: 0,
            intervalX: 0
        };
    },
    methods: {
        draw: function (force) {
            const ctx = this.context;
            const self = this;
            const { intervalX, minX } = this;
            if (typeof (force) === 'boolean') {
                draw();
                return;
            }
            draw();
            function draw () {
                ctx.setFillStyle('#F0F7FD');
                ctx.fillRect(0, 0, self.WIDTH, self.HEIGHT);
                ctx.drawImage(self.path, self.x - 5, 0, 10, self.HEIGHT);
                ctx.setFontSize(12);
                ctx.moveTo(minX, 15);
                ctx.lineTo(minX, 20);
                ctx.setStrokeStyle('#D2D5D5');
                ctx.setFillStyle('#D2D5D5');
                ctx.fillText('00:00', minX - 15, 40);

                ctx.moveTo(minX + intervalX, 15);
                ctx.lineTo(minX + intervalX, 20);
                ctx.fillText('06:00', minX + intervalX - 15, 40);

                ctx.moveTo(minX + intervalX * 2, 15);
                ctx.lineTo(minX + intervalX * 2, 20);
                ctx.fillText('12:00', minX + intervalX * 2 - 15, 40);

                ctx.moveTo(minX + intervalX * 3, 15);
                ctx.lineTo(minX + intervalX * 3, 20);
                ctx.fillText('18:00', minX + intervalX * 3 - 15, 40);

                ctx.moveTo(minX + intervalX * 4, 15);
                ctx.lineTo(minX + intervalX * 4, 20);
                ctx.fillText('24:00', minX + intervalX * 4 - 15, 40);

                ctx.stroke();
                ctx.draw();
                self.canvas.requestAnimationFrame(self.draw);
            }
        },
        touchStart: function (e) {
            e = e.mp;
            var startX = e.changedTouches[0].x;
            console.log(startX, 'startX');
            this.isPlay = true;
        },
        touchMove: function (e) {
            e = e.mp;
            var moveX = e.changedTouches[0].x;
            // 获取最大值最小值  指针图片大小 来确定moveX的范围
            if (moveX <= this.minX) {
                moveX = this.minX;
            }
            if (moveX >= this.maxX) {
                moveX = this.maxX;
            }
            this.x = moveX;
            let ratio = Math.floor((moveX - this.minX) / (this.maxX - this.minX) * 100) / 100; // 百分比
            let value = (this.max - this.min) * ratio; // 分钟数
            let currentTime = this.formatHoursToUT(value);
            console.log('当前选择时间', this.formatHoursToUT(value));
        },
        formatHoursToUT (value) {
            value = value * 60;
            let result = parseInt(value);
            let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
            let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
            result = `${h}:${m}`;
            return result;
        },
        touchEnd: function (e) {
            this.isPlay = false;
        }
    },
    onReady () {
        this.system = wx.getSystemInfoSync();
        var w = this.system.windowWidth;
        this.WIDTH = 700 / 750 * w;
        this.HEIGHT = 80 / 750 * w;
        this.intervalX = this.WIDTH / 5;
        this.minX = this.intervalX / 2;
        this.maxX = this.WIDTH - this.minX;
        if (typeof this.value === 'number') {
            let ratio = Math.floor(this.value / (this.max - this.min) * 100) / 100;
            this.x = this.minX + ratio * (this.maxX - this.minX);
        } else {
            this.x = this.minX;
        }
        const self = this;
        wx.getImageInfo({
            src: 'https://s1.insentek.com/yk/mp/scene/time_bar.png',
            fail (err) {
                console.log(err);
            },
            success (res) {
                self.path = res.path;
                const query = wx.createSelectorQuery().select('#ruleMask').node();
                query.exec((res) => {
                    if (!res || res.length === 0 || !res[0]) {
                        return;
                    }
                    self.canvas = res[0].node;
                    self.context = wx.createCanvasContext('ruleCanvas', self);
                    self.draw(true);
                });
            }
        });
    },
    watch: {
        value (val) {
            let ratio = Math.floor(this.value / (this.max - this.min) * 100) / 100;
            this.x = this.minX + ratio * (this.maxX - this.minX);
        }
    },
    onHide () {
        this.canvas && this.canvas.cancelAnimationFrame(this.requestId);
    }
};
</script>
<style lang="less">
.timeRuler {
  width: 100%;
  height: 80rpx;
  position: absolute;
  bottom: 0;
  background: #F0F7FD;
}
.rule {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.rule-mask {
  z-index: 0 !important;
  width: 1rpx;
  height: 1rpx;
}
</style>

组件截图