小程序canvas签字功能

Dear 丶 2022-12-06 15:05 132阅读 0赞

## 先看效果图 ##

![在这里插入图片描述][20200913201220223.gif_pic_center]

## 上代码 ##

canvas.wxml

<canvas canvas-id="canvas" id="canvas" bindtouchstart="touchstart" bindtouchmove="touchmove" ></canvas>

canvas.js

Page({ 
      data: { 
        context:null
      },
      onShow(){ 
        const context = wx.createCanvasContext('canvas')
        this.setData({ 
          context: context
        })
        context.draw()
      },
      /**记录开始点 */
      touchstart: function (e) { 
        this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
      },
      /**记录移动点，刷新绘制 */
      touchmove: function (e) { 
        this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
        this.data.context.stroke();
        this.data.context.draw(true);
        this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
      },
    })

canvas.wxss

#canvas{ 
      width: 100%;
      height: 600rpx;
      box-sizing: border-box;
      background: #fff;
    }
    page{ 
      background: #ccc;
    }

[20200913201220223.gif_pic_center]: /images/20221123/7f0c570118f942fabc31b7106391e40d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序canvas签字功能

先看效果图 ![在这里插入图片描述][20200913201220223.gif_pic_center] 上代码 canvas.wxml <canvas

Dear 丶/ 2022年12月06日 15:05/ 0 赞/ 133 阅读

相关小程序canvas高斯模糊

//以下是小程序html代码 <canvas canvas-id="canvasIn" class="canvas"></canvas> <canv

缺乏、安全感/ 2022年09月08日 12:54/ 0 赞/ 191 阅读

相关小程序Canvas隐藏问题处理

一、目前版本小程序框架当前问题参考处理建议使用这种方式：[https://my.oschina.net/tianma3798/blog/2051575][https_my.

以你之姓@/ 2022年05月23日 13:38/ 0 赞/ 333 阅读

相关小程序 canvas旋转文字

小程序实现：效果如下图： ![70][] js部分： //canvas画图片 savedetailCanvas : function () \{ //

末蓝、/ 2022年05月21日 06:28/ 0 赞/ 509 阅读

相关小程序canvas多行文字

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

古城微笑少年丶/ 2022年04月24日 01:32/ 0 赞/ 210 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 379 阅读

相关小程序canvas的一个坑

很奇怪，原来好好的，结果现在显示乱了，模拟器和手机都不一样。模拟器上，整个canvas都往右偏移了，手机上，右侧有一大片空白。反复试验，发现问题是：page的对齐方式

Love The Way You Lie/ 2021年09月17日 13:38/ 0 赞/ 287 阅读

相关小程序利用canvas实现一键保存图片功能

在同一个项目（项目归类于学习类，类似答题那种）开发中，又有了一个新的应用需求（上一个应用需求可查看链接：[https://blog.csdn.net/Charles\_Tian

约定不等于承诺〃/ 2021年09月15日 15:40/ 0 赞/ 530 阅读

相关微信小程序 - 使用canvas绘制海报实现分享功能

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3

喜欢ヅ旅行/ 2021年08月28日 16:28/ 0 赞/ 696 阅读

相关微信小程序分享功能，保存图片分享朋友圈功能，canvas基础

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

骑猪看日落/ 2021年07月24日 16:35/ 0 赞/ 595 阅读