微信小程序涂鸦功能的实现

先来看看运行效果：

布局文件index.wxml：

<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>

逻辑功能文件index.js：

大家学会了吗？赶紧动手尝试一下吧。

相关推荐：

推荐10款涂鸦特效（收藏）

涂鸦板简单实现 Html5编写属于自己的画画板

Html5简单实现涂鸦板的示例代码

以上就是微信小程序涂鸦功能的实现的详细内容，更多请关注Gxl网其它相关文章！