微信小程序-基于canvas画画涂鸦

代码地址如下：
http://www.demodashi.com/demo/14461.html

一、前期准备工作

软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 实现用户自定画笔大小
• 实现用户自定色彩
• 实现用户动画撤回之前的操作
• 实现生成分享海报
• 实现用户预览画作,清除画布

2、案例目录结构

二、程序实现具体步骤

1.index.wxml代码

<view class="option-panel">
    <view class="option-row" id="firstRow">
      <view class="width-container">
        <text>笔触大小</text>
        <block wx:for="{
  {lineWidthArr.length}}" wx:key="index">
          <brush-point class="brush-point" radius="{
  {lineWidthArr[index]}}" data-index="{
  {index}}" selected="{
  {index === curWidthIndex}}" bind:select="clickChangeWidth" color="{
  {currentColor}}"></brush-point>
        </block>
      </view>
    </view>
    <view class="option-row" id="secondRow">
      <view class="color-slecotr-left"></view>