【微信小程序】canvas实现涂鸦板功能_微信小程序实现画板

<style>
.container {
  height: 100%;
  box-sizing: border-box;
} 
page{
  height: 100%
}

.container{
  width: 100%;
  height: 100%;
  position: relative
}

.canvas_area{
  width: 100%;
  height: 100%;
  background: #e0ffff
}

.myCanvas{
  width: 100%;
  height: 100%
}

.canvas_tools {
  width: 100%;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.box{
  width: 100rpx;
  height: 100rpx;
  background: rebeccapurple;
  border-radius: 50%;
}

.box1{
  width: 60rpx;
  height: 60rpx
}
.box3{
  background-color: #cc0033
}
.box4{
  background-color: #ff9900
}
.clearBtn{
  position: absolute;
  right: 0;
  top: 0;
}
</style>
<script>
Page({
  startX:0,
  startY:0,
  /**
   * 页面的初始数据
   */
  data: {
    pen:2,
    color:'#00ff00'
  },
  // 笔触粗细
  penSelect:function(e){
    this.setData({
      pen:parseInt(e.currentTarget.dataset.param)
    })
  },
  // 颜色选取
  colorSelect:function(e){
    this.setData({
      color:e.currentTarget.dataset.param
    })
  },
  clearCanvas:function(e){
    this.context.setFillStyle('#e0ffff')
    this.context.fillRect(0, 0, 375, 603)
    this.context.draw()
    this.context.draw()
    console.log('已清空画布')
  },
  // 触摸起始事件
  touchStart:function(e){
    // 获取当前坐标位置
    this.startX = e.changedTouches[0].x
    this.startY = e.changedTouches[0].y
    // console.log(this.startX, this.startY)
    // 创建绘图上下文对象
    this.context = wx.createCanvasContext(this)
    // 设置颜色
    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
    console.log(startX1, startY1)
    // 设置画笔移动到起始点
    this.context.moveTo(this.startX,this.startY)
    // 绘制一条到x1,y1的直线
    this.context.lineTo(startX1,startY1)
    // 路径描边(只在内存上完成，未在桌面上绘制)
    this.context.stroke()
    // 重新设置坐标点
    this.startX = startX1
    this.startY = startY1
    // 绘制
    wx.drawCanvas({
      canvasId: 'myCanvas',
      reserve:true,
      actions:this.context.getActions()// 获取绘图动作数组
    })
  }
 })
</script>
<page>
	<view class='container'>
  <view class="canvas_area">
    <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="{{false}}" bindtouchstart="touchStart" bindtouchmove="touchMove">
    </canvas>
  </view>
  <button size="mini" type="warn" class="clearBtn" bindtap="clearCanvas">清空画布</button>
  <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>
</view>
</page>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149