标签：涂鸦 color 微信 100% canvas height 画布 context wx

canvas.wxml

<view class="container">
    <view class="canvas_area">
        <canvas
            canvas-id="myCanvas"
            class="myCanvas"
            disable-scroll="{{false}}"
            bindtouchstart="touchStart"
            bindtouchmove="touchMove"
            bindtouchend="touchEnd"
        ></canvas>        
    </view>
    <view class="canvas_tools">
        <!--细笔-->
        <view class="box box1" bindtap="penSelect" data-param="5">细</view>
        <!--粗笔-->
        <view class="box box2" bindtap="penSelect" data-param="15">粗</view>
        <!--颜色-->
        <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
        <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
        <!--导出-->
        <view class="box box5" bindtap="handleOperate">操作</view>
    </view>
</view>

canvas.wxss

page{
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
}

.canvas_area {
    width: 100%;
    height: 100%;
    background-color: lightblue;
}

.myCanvas {
    width: 100%;
    height: 100%;
}

.canvas_tools {
    position: absolute;
    left: 0;
    bottom: 20rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.box {
    width: 100rpx;
    height: 100rpx;
    background-color: rebeccapurple;
    border-radius: 50%;
}

.box1, .box2, .box5 {
    color: #fff;
    text-align: center;
    line-height: 100rpx;
}

.box3 {
    background-color: #cc0033;
}

.box4 {
    background-color: #ff9900;
}

canvas.js

Page({
  // 定义坐标变量
  startX: 0,
  startY: 0,
  /**
   * 页面的初始数据
   */
  data: {
    pen: 2, // 笔的粗细
    color: "#00ff00", // 笔的颜色
  },
  /**
   * 选取笔的粗细
   */
  penSelect(e) {
    this.setData({
      pen: parseInt(e.currentTarget.dataset.param)
    });
    this.clearCanvas();
  },
  /**
   * 触笔颜色选择
   */
  colorSelect (e) {
    this.setData({
      color: e.currentTarget.dataset.param
    });
  },
  /**
  * 清除画布
  */
  clearCanvas() {
    console.log("............");
    this.context.draw();
  },
  /**
   * 触摸起始事件
   */
  touchStart(e) {
    // 获取当前的坐标位置
    this.startX = e.changedTouches[0].x;
    this.startY = e.changedTouches[0].y;
    // 创建绘图上下文对象
    this.context = wx.createCanvasContext('myCanvas', this);
    // 设置颜色
    this.context.setStrokeStyle(this.data.color);
    // 设置笔触
    this.context.setLineWidth(this.data.pen);
    // 设置笔边（圆角）
    this.context.setLineCap("round");
    // 开始绘制
    this.context.beginPath();
  },
  /**
   * 触摸的移动事件
   */
  touchMove(e) {
    // 获取移动后的新坐标
    let startX1 = e.changedTouches[0].x;
    let 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;
    // 绘制
    // this.context.draw();
    wx.drawCanvas({
      canvasId: "myCanvas",
      reserve: true,
      actions: this.context.getActions() // 获取绘图动作数组
    });
  },
  /**
   * touchStart
   */
  touchEnd() {

  },
  /**
   * 导出
   */
  handleOperate() {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      quality: 0,
      success: (res) => {
        console.log(res);
        // 保存相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            wx.showToast({
              title: '保存成功'
            })
          },
          fail: (err) => {
            // 授权失败
            if (err.errMsg) {
              wx.showModal({
                title: '提示',
                content: '您好,请先授权，在保存此图片!',
                showCancel: false,
                success(res) {
                  if (res.confirm) {
                    wx.openSetting({
                      complete: (settingdata) => {
                        // 授权成功或者失败操作
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showToast({
                            title: '授权成功'
                          })
                        } else {
                          wx.showToast({
                            title: '授权失败'
                          })
                        }
                      },
                    })
                  }
                }
              })
            }
          }
        });
      }
    })
  }
})

效果图

标签：涂鸦,color,微信,100%,canvas,height,画布,context,wx
来源： https://blog.csdn.net/yw00yw/article/details/121034863

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。