Skip to content

Commit 877cba8

Browse files
hxyyxhxyyx
committed
fix: mp-alipay canvas
1 parent 5cdc9d9 commit 877cba8

1 file changed

Lines changed: 45 additions & 45 deletions

File tree

‎pages/API/canvas/canvas.vue‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<view>
33
<page-head :title="title"></page-head>
44
<view class="uni-common-mt">
5-
<canvas class="canvas-element" canvas-id="canvas"></canvas>
5+
<canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
66
<scroll-view class="canvas-buttons" scroll-y="true">
77
<block v-for="(name, index) in names" :key="index">
88
<button class="canvas-button" @tap="handleCanvasButton(name)">{{name}}</button>
@@ -25,32 +25,32 @@
2525
]
2626
}
2727
},
28-
onReady: function () {
28+
onReady: function() {
2929
context = uni.createCanvasContext('canvas')
3030
},
3131
methods: {
32-
toTempFilePath: function () {
32+
toTempFilePath: function() {
3333
uni.canvasToTempFilePath({
3434
canvasId: 'canvas',
35-
success: function (res) {
35+
success: function(res) {
3636
console.log(res.tempFilePath)
3737
},
38-
fail: function (err) {
38+
fail: function(err) {
3939
console.error(JSON.stringify(err))
4040
}
4141
})
4242
},
43-
handleCanvasButton: function (name) {
44-
this[name]()
43+
handleCanvasButton: function(name) {
44+
this[name] && this[name]();
4545
},
46-
rotate: function () {
46+
rotate: function() {
4747
context.beginPath()
4848
context.rotate(10 * Math.PI / 180)
4949
context.rect(225, 75, 20, 10)
5050
context.fill()
5151
context.draw()
5252
},
53-
scale: function () {
53+
scale: function() {
5454
context.beginPath()
5555
context.rect(25, 25, 50, 50)
5656
context.stroke()
@@ -62,7 +62,7 @@
6262
context.stroke()
6363
context.draw()
6464
},
65-
reset: function () {
65+
reset: function() {
6666
context.beginPath()
6767
6868
context.setFillStyle('#000000')
@@ -77,7 +77,7 @@
7777
context.setMiterLimit(10)
7878
context.draw()
7979
},
80-
translate: function () {
80+
translate: function() {
8181
context.beginPath()
8282
context.rect(10, 10, 100, 50)
8383
context.fill()
@@ -88,7 +88,7 @@
8888
context.fill()
8989
context.draw()
9090
},
91-
save: function () {
91+
save: function() {
9292
context.beginPath()
9393
context.setStrokeStyle('#00ff00')
9494
context.save()
@@ -103,8 +103,8 @@
103103
context.stroke()
104104
context.draw()
105105
},
106-
restore: function () {
107-
[3, 2, 1].forEach(function (item) {
106+
restore: function() {
107+
[3, 2, 1].forEach(function(item) {
108108
context.beginPath()
109109
context.save()
110110
context.scale(item, item)
@@ -114,11 +114,11 @@
114114
});
115115
context.draw()
116116
},
117-
drawImage: function () {
117+
drawImage: function() {
118118
context.drawImage('../../../static/uni@2x.png', 0, 0)
119119
context.draw()
120120
},
121-
fillText: function () {
121+
fillText: function() {
122122
context.setStrokeStyle('#ff0000')
123123
124124
context.beginPath()
@@ -141,14 +141,14 @@
141141
context.stroke()
142142
context.draw()
143143
},
144-
fill: function () {
144+
fill: function() {
145145
context.beginPath()
146146
context.rect(20, 20, 150, 100)
147147
context.setStrokeStyle('#00ff00')
148148
context.fill()
149149
context.draw()
150150
},
151-
stroke: function () {
151+
stroke: function() {
152152
context.beginPath()
153153
context.moveTo(20, 20)
154154
context.lineTo(20, 100)
@@ -157,15 +157,15 @@
157157
context.stroke()
158158
context.draw()
159159
},
160-
clearRect: function () {
160+
clearRect: function() {
161161
context.setFillStyle('#ff0000')
162162
context.beginPath()
163163
context.rect(0, 0, 300, 150)
164164
context.fill()
165165
context.clearRect(20, 20, 100, 50)
166166
context.draw()
167167
},
168-
beginPath: function () {
168+
beginPath: function() {
169169
context.beginPath()
170170
context.setLineWidth(5)
171171
context.setStrokeStyle('#ff0000')
@@ -179,7 +179,7 @@
179179
context.stroke()
180180
context.draw()
181181
},
182-
closePath: function () {
182+
closePath: function() {
183183
context.beginPath()
184184
context.setLineWidth(1)
185185
context.moveTo(20, 20)
@@ -189,28 +189,28 @@
189189
context.stroke()
190190
context.draw()
191191
},
192-
moveTo: function () {
192+
moveTo: function() {
193193
context.beginPath()
194194
context.moveTo(0, 0)
195195
context.lineTo(300, 150)
196196
context.stroke()
197197
context.draw()
198198
},
199-
lineTo: function () {
199+
lineTo: function() {
200200
context.beginPath()
201201
context.moveTo(20, 20)
202202
context.lineTo(20, 100)
203203
context.lineTo(70, 100)
204204
context.stroke()
205205
context.draw()
206206
},
207-
rect: function () {
207+
rect: function() {
208208
context.beginPath()
209209
context.rect(20, 20, 150, 100)
210210
context.stroke()
211211
context.draw()
212212
},
213-
arc: function () {
213+
arc: function() {
214214
context.beginPath()
215215
context.setLineWidth(2)
216216
context.arc(75, 75, 50, 0, Math.PI * 2, true)
@@ -223,41 +223,41 @@
223223
context.stroke()
224224
context.draw()
225225
},
226-
quadraticCurveTo: function () {
226+
quadraticCurveTo: function() {
227227
context.beginPath()
228228
context.moveTo(20, 20)
229229
context.quadraticCurveTo(20, 100, 200, 20)
230230
context.stroke()
231231
context.draw()
232232
},
233-
bezierCurveTo: function () {
233+
bezierCurveTo: function() {
234234
context.beginPath()
235235
context.moveTo(20, 20)
236236
context.bezierCurveTo(20, 100, 200, 100, 200, 20)
237237
context.stroke()
238238
context.draw()
239239
},
240-
setFillStyle: function () {
241-
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
240+
setFillStyle: function() {
241+
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) {
242242
context.setFillStyle(item)
243243
context.beginPath()
244244
context.rect(0 + 75 * index, 0, 50, 50)
245245
context.fill()
246246
})
247247
context.draw()
248248
},
249-
setStrokeStyle: function () {
250-
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
249+
setStrokeStyle: function() {
250+
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) {
251251
context.setStrokeStyle(item)
252252
context.beginPath()
253253
context.rect(0 + 75 * index, 0, 50, 50)
254254
context.stroke()
255255
})
256256
context.draw()
257257
},
258-
setGlobalAlpha: function () {
258+
setGlobalAlpha: function() {
259259
context.setFillStyle('#000000');
260-
[1, 0.5, 0.1].forEach(function (item, index) {
260+
[1, 0.5, 0.1].forEach(function(item, index) {
261261
context.setGlobalAlpha(item)
262262
context.beginPath()
263263
context.rect(0 + 75 * index, 0, 50, 50)
@@ -266,23 +266,23 @@
266266
context.draw()
267267
context.setGlobalAlpha(1)
268268
},
269-
setShadow: function () {
269+
setShadow: function() {
270270
context.beginPath()
271271
context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
272272
context.rect(10, 10, 100, 100)
273273
context.fill()
274274
context.draw()
275275
},
276-
setFontSize: function () {
277-
[10, 20, 30, 40].forEach(function (item, index) {
276+
setFontSize: function() {
277+
[10, 20, 30, 40].forEach(function(item, index) {
278278
context.setFontSize(item)
279279
context.fillText('Hello, world', 20, 20 + 40 * index)
280280
})
281281
context.draw()
282282
},
283-
setLineCap: function () {
283+
setLineCap: function() {
284284
context.setLineWidth(10);
285-
['butt', 'round', 'square'].forEach(function (item, index) {
285+
['butt', 'round', 'square'].forEach(function(item, index) {
286286
context.beginPath()
287287
context.setLineCap(item)
288288
context.moveTo(20, 20 + 20 * index)
@@ -291,9 +291,9 @@
291291
})
292292
context.draw()
293293
},
294-
setLineJoin: function () {
294+
setLineJoin: function() {
295295
context.setLineWidth(10);
296-
['bevel', 'round', 'miter'].forEach(function (item, index) {
296+
['bevel', 'round', 'miter'].forEach(function(item, index) {
297297
context.beginPath()
298298
context.setLineJoin(item)
299299
context.moveTo(20 + 80 * index, 20)
@@ -303,8 +303,8 @@
303303
})
304304
context.draw()
305305
},
306-
setLineWidth: function () {
307-
[2, 4, 6, 8, 10].forEach(function (item, index) {
306+
setLineWidth: function() {
307+
[2, 4, 6, 8, 10].forEach(function(item, index) {
308308
context.beginPath()
309309
context.setLineWidth(item)
310310
context.moveTo(20, 20 + 20 * index)
@@ -313,9 +313,9 @@
313313
})
314314
context.draw()
315315
},
316-
setMiterLimit: function () {
316+
setMiterLimit: function() {
317317
context.setLineWidth(4);
318-
[2, 4, 6, 8, 10].forEach(function (item, index) {
318+
[2, 4, 6, 8, 10].forEach(function(item, index) {
319319
context.beginPath()
320320
context.setMiterLimit(item)
321321
context.moveTo(20 + 80 * index, 20)
@@ -354,4 +354,4 @@
354354
width: 300upx;
355355
margin: 15upx 12upx;
356356
}
357-
</style>
357+
</style>

0 commit comments

Comments
 (0)