首页 > 编程语言 >小程序使用canvas 2D实现签字效果

小程序使用canvas 2D实现签字效果

时间:2022-09-26 14:23:02浏览次数:87  
标签:canvas res ctx touches 签字 2D CanvasCote data

效果如下:

 

 

请结合小程序官方文档进行解读

wxml:

<view>
  <view>请在下方签字:</view>
  <canvas id="myCanvas"
  type="2d"
  style="border:1px solid #d3d3d3;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end"/>
 <view>
  <button  bind:tap="clearCan">清除</button>
  <button type="submit" bind:tap="submitCan">保存</button>
  <van-image width="100" height="100" model:src="{{canvanImg}}" />
 </view>
</view>

js:

/**
   * 页面的初始数据
*/
data: {
    canvas:null,
    CanvasCote:null,
    canvanImg:"",
},
//触摸开始
start (e) {
    this.data.CanvasCote.beginPath()
    this.data.CanvasCote.moveTo(e.touches[0].x,e.touches[0].y)
},
//触摸移动
move (e) {
    this.data.CanvasCote.lineTo(e.touches[0].x, e.touches[0].y)
    this.data.CanvasCote.stroke()//将上下文绘制到canvas中
},
//触摸结束
end (e) {
    this.data.CanvasCote.closePath()
},
//清除画布内容
clearCan(){
    this.data.CanvasCote.clearRect(0, 0,this.data.canvas.width, this.data.canvas.height)
    this.setData({
        canvanImg:""
    })
},
//点击保存生成图片
submitCan(){
    this.setData({
        canvanImg:this.data.canvas.toDataURL("image/png")
    })
    console.log(this.data.canvas.toDataURL("image/png"))
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    let that = this;
    //如果在 exec 中获取不到res,这里就写 wx.createSelectorQuery().in(this)
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').node().exec((res) => {
        that.setData({
            canvas: res[0].node,
            CanvasCote: res[0].node.getContext('2d')
        })
        let ctx = that.data.CanvasCote;
        ctx.fillStyle = "#fff"
        ctx.fillRect(0, 0, that.data.canvas.width, that.data.canvas.height);
        ctx.strokeStyle='black'
        ctx.lineCap = 'round'; // 线条末端添加圆形线帽,减少线条的生硬感
        ctx.lineJoin = 'round'; // 线条交汇时为原型边角
        // 利用阴影,消除锯齿
        ctx.shadowBlur = 1;
        ctx.shadowColor = '#000';
    })
},

标签:canvas,res,ctx,touches,签字,2D,CanvasCote,data
From: https://www.cnblogs.com/smile-fanyin/p/16730780.html

相关文章

  • HTML5 Canvas
    HTMLCanvas创建一个画布<canvasid="mycanvas"width="200"height="200"style="border:1pxsolid#000000"></canvas>用于图形的绘制,通过javascript完成画布是一......
  • 算法实现2D OBB碰撞
    boxusingSystem;usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassDrawLine:MonoBehaviour{publicVector3[]......
  • mask和RectMask2D区别
    1.Mask遮罩的大小与形状依赖于Graphic,而RectMask2D只需要依赖RectTransform2.Mask支持圆形或其他形状遮罩,而RectMask2D只支持矩形3.Mask会增加drawcall4、mask的性......
  • uniapp小程序使用wxml-to-canvas生成图片
    开发框架:uniapp场景:小程序保存页面为图片并上传尝试方案:使用html-to-canvas,问题:小程序不允许操作dom,也无法获取dom标签,只能通过wx.createSelectorQuery()获取dom信息。......
  • 在线直播系统源码,canvas 生成图片模糊
    在线直播系统源码,canvas生成图片模糊关于canvas的一些基础知识 canvas绘制的是位图canvas的width和height属性 canvas的width和height属性与style的width,height......
  • 使用 Win2D 实现融合效果
    1.融合效果在CSS中有一种实现融合效果的技巧,使用模糊滤镜(blur)叠加对比度滤镜(contrast)使两个接近的元素看上去“粘”在一起,如下图所示:博客园的ChokCoco就用这个技巧......
  • AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did y
     plt报错像是下面这样子File"C:\Users\abc\AppData\Local\Programs\Python\Python310\lib\site-packages\matplotlib\pyplot.py",line191,in_get_required_inter......
  • 如何利用OpenHarmony ArkUI的Canvas组件实现涂鸦功能?
     简介ArkUI是一套UI开发框架,提供了开发者进行应用UI开发时所需具备的能力。随着OpenAtomOpenHarmony(以下简称“OpenHarmony”)不断更新迭代,ArkUI也提供了很多新的组件......
  • html2canvas把dom元素转换成图片时跨域,crossorigin="anonymous"导致跨域问题
    1.前端使用html2canvas是需要注意配置  crossorigin="anonymous"<divclass="c-l-c"ref="lz-image2"><imgclass="image":src="dataObj.matchFile.fileUrl+'?'......
  • 使用canvas实现简易代码雨
    分享一个使用canvas生成的一个简易代码雨特效首先HTML文件如下...<body><canvasid="bg"></canvas></body>...Javascript代码如下constcvs=document.getElemen......