小程序canvas组件实现涂鸦板功能

这篇文章我们利用wx canvas组件来实现涂鸦板的功能，主要实现了一些比较简单的功能，绘图，改变画笔粗细，改变画笔颜色，仅此而已,代码如下相关api可以参考官网:
canvas.wxml

<view class="container">
<view class="canvas-area">
    <canvas canvas-id="mycanvas" disable-scroll='{{false}}' bindtouchstart='touchstart' bindtouchmove='touchmove' class="mycanvas"></canvas>
</view>
<view class="canvas-tools">
<!-- 细笔 -->
//这里以data-param的形式传递参数，在js事件中，可以通过e.currentTarget.dataset.param获取我们传过去的值
<view class="box box1" data-param="5" bindtap="penselect"></view>
<!-- 粗笔 -->
<view class="box box2" data-param="15"  bindtap="penselect"></view>
<!-- 颜色 -->
<view class="box box3" data-param="orange"  bindtap="selectColor"></view>
<view class="box box4" data-param="#ff0000"  bindtap="selectColor"></view>
</view>
</view>

canvas.wxss

page{
    height: 100%;
}
.container{
height: 100%;
width: 100%;
position: relative;
}
.canvas-area{
    height: 100%;
    width: 100%;
}
.mycanvas{
    width: 100%;
    height: 100%;
    background-color: lightcyan;
}
.canvas-tools{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 20rpx;
    display: flex;
    justify-content: space-around;
}
.box{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: purple;
}
.box3{
    background-color: orange;
}
.box4{
    background-color: red;
}

canvas.js

Page({
    startX:0,//起点横坐标
    startY:0,//起点纵坐标
    /**
     * 页面的初始数据
     */
    data: {
     pen:3,//笔的粗细
     color:'#00ff00',//笔的颜色
    },
    /**
     * 改变笔的颜色
     */
    selectColor(e){
        console.log(e,'select');
        let val=e.currentTarget.dataset.param;
        this.setData({
            color:val
        })
    },
    /**
     * 改变笔的粗细
     */
    penselect(e){
        console.log(e);
        let val=e.currentTarget.dataset.param;
        this.setData({
            pen:val
        })
    },
    /**
     * 触摸开始事件
     */
    touchstart(e){
        // 获取起点坐标位置
        this.startX=e.changedTouches[0].x;
        this.startY=e.changedTouches[0].y;
        // 创建绘图上下文对象、
        this.context=wx.createContext();
        // 设置颜色
        this.context.setStrokeStyle(this.data.color);
        // 设置笔触(笔的宽度)
        this.context.setLineWidth(this.data.pen);
        // 设置笔边('圆角)
        this.context.setLineCap('round');
        // 开始绘制
        this.context.beginPath()

    },
    /**
     * 触摸移动事件
     */
    touchmove(e){
        console.log(e,'touchmove');
        // 获取移动后的新坐标
        var startX1=e.changedTouches[0].x;
        var startY1=e.changedTouches[0].y;
        // 设置画笔移动到起始点
        this.context.moveTo(this.startX,this.startY);
        // 绘制一条到x1，y1的直线
        this.context.lineTo(startX1,startY1);
        // 进行路径的描边
        this.context.stroke()
        // 重新设置坐标点
        this.startX=startX1;
        this.startY=startY1;
        // 以上的操作都是在内存中完成的
        var that=this
        // 绘制到界面上
        wx.drawCanvas({
            canvasId:'mycanvas',
            reserve:true,//是否存储
            actions:that.context.getActions(),//获取绘图动作的数组
        })
    },
})

效果如下:

微信涂鸦板.png