`
郭丶小川
  • 浏览: 33921 次
社区版块
存档分类
最新评论

微信小程序canvas组件简单运用之涂鸦

阅读更多



源码
index.html

<view class="container">
    <!--画布区域-->
    <view class="canvas_area">
        <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作-->
        <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="clearCanvas"></view>
    </view>
</view>

手指滑动代码

//手指触摸动作开始
  touchStart: function (e) {
      //得到触摸点的坐标
      this.startX = e.changedTouches[0].x
      this.startY = e.changedTouches[0].y
      this.context = wx.createContext()

      if(this.isClear){ //判断是否启用的橡皮擦功能  ture表示清除  false表示画画
         this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色  橡皮擦原理就是:利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果
         this.context.setLineCap('round') //设置线条端点的样式
         this.context.setLineJoin('round') //设置两线相交处的样式
         this.context.setLineWidth(20) //设置线条宽度
         this.context.save();  //保存当前坐标轴的缩放、旋转、平移信息
         this.context.beginPath() //开始一个路径
         this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true);  //添加一个弧形路径到当前路径,顺时针绘制  这里总共画了360度  也就是一个圆形
         this.context.fill();  //对当前路径进行填充
         this.context.restore();  //恢复之前保存过的坐标轴的缩放、旋转、平移信息
      }else{
         this.context.setStrokeStyle(this.data.color)
         this.context.setLineWidth(this.data.pen)
         this.context.setLineCap('round') // 让线条圆润
         this.context.beginPath()

      }
  },
  //手指触摸后移动
  touchMove: function (e) {

      var startX1 = e.changedTouches[0].x
      var startY1 = e.changedTouches[0].y

      if(this.isClear){ //判断是否启用的橡皮擦功能  ture表示清除  false表示画画

        this.context.save();  //保存当前坐标轴的缩放、旋转、平移信息
        this.context.moveTo(this.startX,this.startY);  //把路径移动到画布中的指定点,但不创建线条
        this.context.lineTo(startX1,startY1);  //添加一个新点,然后在画布中创建从该点到最后指定点的线条
        this.context.stroke();  //对当前路径进行描边
        this.context.restore()  //恢复之前保存过的坐标轴的缩放、旋转、平移信息

        this.startX = startX1;
        this.startY = startY1;

      }else{
        this.context.moveTo(this.startX, this.startY)
        this.context.lineTo(startX1, startY1)
        this.context.stroke()

        this.startX = startX1;
        this.startY = startY1;

      }
      //只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>
      wx.drawCanvas({
         canvasId: 'myCanvas',
         reserve: true,
         actions: this.context.getActions() // 获取绘图动作数组
      })
  }

以上是一部分代码展示,下面做核心原理说明:
1、能画出不同颜色的线条 主要是以下三个方法 setStrokeStyle(画笔的颜色) moveTo(把路径移动到画布中的指定点,但不创建线条) lineTo(添加一个新点,然后在画布中创建从该点到最后指定点的线条) 这样就可以从A点坐标到B点坐标  画出不同颜色的线条啦!!!
2、橡皮擦的原理:之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色 这样就可以”欺骗”自己的眼睛  达到橡皮擦的效果啦!!!

源码链接请戳:http://bbs.jointforce.com/topic/24201
分享到:
评论

相关推荐

    微信小程序使用canvas绘图并且把图片上传到服务器上面.rar

    在微信小程序中,Canvas是一个非常重要的组件,它提供了丰富的绘图能力,可以用于实现各种动态效果和交互功能,如涂鸦、图片处理等。本教程将详细介绍如何在微信小程序中使用Canvas进行绘图,并将处理后的图片上传到...

    微信小程序canvas画布实现画笔自由绘制

    在微信小程序中,canvas画布是一个非常重要的组件,它允许开发者进行丰富的图形操作,包括自由绘制功能。这个功能常用于创建涂鸦应用、手写笔记、图像编辑等场景。本篇将详细介绍如何利用微信小程序的canvas API来...

    基于Taro框架的微信小程序canvas绘图组件

    在创建基于 Taro 的 canvas 绘图组件时,首先我们需要引入微信小程序的 canvas API。这些 API 允许我们在 canvas 上进行各种绘图操作,例如 `createCanvasContext` 用于获取画布上下文,`drawImage` 用于绘制图像,`...

    微信小程序开发-涂鸦案例源码.zip

    1. **Canvas组件**:涂鸦功能通常基于HTML5的Canvas元素实现,微信小程序也提供了类似的组件——`&lt;canvas&gt;`。Canvas是一个画布,可以通过JavaScript来绘制图形,包括线条、形状、图像等。在这个案例中,开发者会使用...

    微信小程序Demo:随手涂鸦

    这个“随手涂鸦”的Demo是一款基于微信小程序开发的简单绘画应用,允许用户在手机上轻松进行涂鸦创作。下面将详细介绍这款小程序的开发技术和相关知识点。 1. 微信小程序基础: 微信小程序使用的是腾讯自家开发的...

    涂鸦画画微信小程序

    综上所述,"涂鸦画画微信小程序"的源代码不仅展示了如何利用微信小程序的API实现一个简单的绘画应用,还提供了学习图像处理、事件监听、数据管理和用户交互的良好示例。对于想要提升微信小程序开发技能的开发者,这...

    80个微信小程序源码.zip

    80个微信小程序源码: 一个(仿) 一元夺宝主页设计 万年历 下拉刷新,tab切换 事项助手 云笔记 五十音图 五险一金计算 交互操作控件 人脸检测 今日头条 你画我猜 健康菜谱 全屏动画滚动 医药网 卡卡汽车 获取用户 ...

    微信小程序源码-涂鸦功能.zip

    综上所述,"微信小程序源码-涂鸦功能.zip"的压缩包中,包含了微信小程序Canvas组件的使用、触摸事件的处理、图形绘制技术以及用户交互设计等多个方面的知识。通过学习这个源码,开发者不仅可以掌握涂鸦功能的实现,...

    【微信小程序-毕设期末大作业】涂鸦微信小程序源码.zip

    总的来说,这个“涂鸦微信小程序”源码项目涵盖了微信小程序开发的多个方面,包括UI设计、数据绑定、网络请求、用户授权、动画效果、自定义组件和状态管理等,是一个全面学习微信小程序开发的好材料。通过研究这个...

    微信小程序-涂鸦-程序源码.zip

    通过学习和研究这个涂鸦程序源码,你可以深入了解微信小程序的开发流程,熟悉其编程模型,并掌握如何利用微信小程序提供的API和组件来创建具有交互性的复杂功能。同时,这也是一个很好的实践项目,可以帮助你巩固和...

    微信小程序:涂鸦wx-app-painting-master.zip

    综上所述,这个“涂鸦wx-app-painting-master.zip”项目为我们提供了一个在微信小程序上实现涂鸦功能的实例,涵盖了微信小程序的基本开发知识,以及利用canvas进行图形绘制的技术。通过学习和分析这个项目,开发者...

    canvas涂鸦(含node后端)_微信小程序模板js代码前台前端H5页面源码.rar

    在这个项目中,前端代码可能使用了微信小程序提供的API来与Canvas组件交互,如获取用户触控事件、更新Canvas画布等。同时,开发者可能利用了微信小程序的网络请求接口与后端服务器进行数据交换。 再来看JavaScript...

    123个微信小程序源码.zip

    123个微信小程序源码: AppleMusic B站首页界面设计:附详细教程 cnode社区版 dribbble FlexLayout布局 gank HIapp IT-EBOOK leantodu LOL战绩查询 movecss效果 Railay:整体框架 redux绑定 TCP,IP长连接 todo list ...

    微信小程序canvas写字板效果及实例

    总结来说,这个微信小程序Canvas写字板实例展示了如何利用触摸事件和Canvas API实现实时绘画、重置画板以及图片导出的功能。开发者可以通过这种方式创建丰富的交互式应用,如涂鸦应用、签名板或者简易的绘图工具。...

    微信小程序开发-涂鸦(含node后端)案例源码.zip

    《微信小程序开发-涂鸦(含node后端)案例源码》 本案例涉及的核心知识点主要涵盖微信小程序的开发技术和Node.js后端编程。微信小程序作为腾讯推出的一种轻量级应用开发平台,它允许开发者在微信环境中构建丰富的...

    微信小程序示例 - 一笔到底

    通过分析这个"一笔到底"的微信小程序示例,我们可以深入理解如何结合Canvas和服务器存储来实现用户交互的持久化,同时也可以学习到微信小程序开发的基本流程和技术要点。这个示例对于初学者来说是一个很好的实践项目...

    小程序用Canvas给图片加水印,拼接图片,制作名片

    Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么...

    45个微信小程序源码,可以供学习设计参考.zip

    45个微信小程序源码: 万年历 下拉刷新,tab切换 事项助手 五十音图 五险一金计算 人脸检测 你画我猜 全屏动画滚动 同乐居商城:购物车合算 商城 图书管理系统 图文信息;欢迎页面,音乐控制 图片自适应 ,富文本...

Global site tag (gtag.js) - Google Analytics