Skip to content

Commit 39e6b9c

Browse files
WangyaqiWangyaqi
committed
update: 新增canvas组件示例
1 parent 313d269 commit 39e6b9c

File tree

3 files changed

+244
-88
lines changed

3 files changed

+244
-88
lines changed

‎pages/component/canvas/animate.wxs‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
// function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
2+
// this.canvasWidth = canvasWidth
3+
// this.canvasHeight = canvasHeight
4+
// this.ctx = ctx
5+
// this.x = x
6+
// this.y = y
7+
// this.vx = vx
8+
// this.vy = vy
9+
// this.radius = 5
10+
// }
11+
12+
function draw(ball) {
13+
ball.ctx.beginPath()
14+
ball.ctx.fillStyle = '#007AFF'
15+
ball.ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI)
16+
ball.ctx.closePath()
17+
ball.ctx.fill()
18+
}
19+
20+
function move(ball) {
21+
ball.x += ball.vx
22+
ball.y += ball.vy
23+
// 回到中心
24+
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
25+
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
26+
// this.x = this.canvasWidth / 2
27+
// this.y = this.canvasHeight / 2
28+
// }
29+
30+
// 边框反弹
31+
if (ball.x < ball.radius) {
32+
ball.vx = Math.abs(ball.vx)
33+
return
34+
}
35+
if (ball.x > ball.canvasWidth - ball.radius) {
36+
ball.vx = -Math.abs(ball.vx)
37+
}
38+
if (ball.y < ball.radius) {
39+
ball.vy = Math.abs(ball.vy)
40+
return
41+
}
42+
if (ball.y > ball.canvasWidth - ball.radius) {
43+
ball.vy = -Math.abs(ball.vy)
44+
}
45+
}
46+
47+
function getDistance(x, y) {
48+
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
49+
}
50+
51+
function start(newVal, oldVal, owner, ins) {
52+
var canvasWidth = ins.getDataset().width,
53+
canvasHeight = ins.getDataset().height,
54+
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
55+
ctx = canvasEle.getContext('2d'),
56+
speed = 3,
57+
ballList = [],
58+
layer = 3,
59+
ballInlayer = 20
60+
for (var i = 0; i < layer; i++) {
61+
var radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
62+
for (var j = 0; j < ballInlayer; j++) {
63+
var deg = j * 2 * Math.PI / ballInlayer,
64+
sin = Math.sin(deg),
65+
cos = Math.cos(deg),
66+
x = radius * cos + canvasWidth / 2,
67+
y = radius * sin + canvasHeight / 2,
68+
vx = speed * cos,
69+
vy = speed * sin
70+
ballList.push({x:x, y:y, vx:vx, vy:vy, canvasWidth:canvasWidth, canvasHeight:canvasHeight, ctx:ctx, radius:5})
71+
}
72+
}
73+
74+
function animate(ballList) {
75+
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
76+
ballList.forEach(function(item) {
77+
move(item)
78+
draw(item)
79+
})
80+
requestAnimationFrame(function() {
81+
animate(ballList)
82+
})
83+
}
84+
animate(ballList)
85+
}
86+
87+
module.exports = {
88+
start: start
89+
}

‎pages/component/canvas/canvas.vue‎

Lines changed: 148 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,156 @@
11
<template>
2-
<view>
3-
<page-head :title="title"></page-head>
4-
<view class="page-body">
5-
<view class="page-body-wrapper">
6-
<canvas canvas-id="canvas" class="canvas"></canvas>
7-
</view>
8-
</view>
9-
</view>
2+
<view>
3+
<page-head :title="title"></page-head>
4+
<view class="page-body">
5+
<view class="page-body-wrapper">
6+
<!-- #ifdef APP-PLUS || H5 -->
7+
<canvas canvas-id="canvas" class="canvas" :start="start" :change:start="animate.start" :data-width="canvasWidth"
8+
:data-height="canvasWidth"></canvas>
9+
<!-- #endif -->
10+
<!-- #ifndef APP-PLUS || H5 -->
11+
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
12+
<!-- #endif -->
13+
</view>
14+
</view>
15+
</view>
1016
</template>
17+
18+
<script module="animate" lang="wxs" src="./animate.wxs"></script>
19+
1120
<script>
12-
var context = null,interval = null;
13-
14-
export default {
15-
data() {
16-
return {
17-
title: 'canvas',
18-
screenWidth:uni.getSystemInfoSync().windowWidth,
19-
canvasWidth:0,
20-
position: {
21-
x: 150,
22-
y: 150,
23-
vx: 2,
24-
vy: 2
25-
}
26-
}
27-
},
28-
onReady: function () {
29-
context = uni.createCanvasContext('canvas');
30-
this.canvasWidth = this.screenWidth / 750 * 610;
31-
this.position = {
32-
x:this.canvasWidth/2,
33-
y:this.canvasWidth/2,
34-
vx:2,
35-
vy:2
36-
}
37-
this.drawBall();
38-
interval = setInterval(this.drawBall, 17)
39-
},
40-
onUnload: function () {
41-
clearInterval(interval);
42-
this.position = {
43-
x: 0,
44-
y: 0,
45-
vx: 0,
46-
vy: 0
47-
}
48-
},
49-
methods: {
50-
drawBall: function () {
51-
var p = this.position
52-
p.x += p.vx
53-
p.y += p.vy
54-
if (p.x >= this.canvasWidth) {
55-
p.vx = -2
56-
}
57-
if (p.x <= 7) {
58-
p.vx = 2
59-
}
60-
if (p.y >= this.canvasWidth) {
61-
p.vy = -2
62-
}
63-
if (p.y <= 7) {
64-
p.vy = 2
65-
}
66-
function ball(x, y) {
67-
context.beginPath(0)
68-
context.arc(x, y, 5, 0, Math.PI * 2)
69-
context.setFillStyle('#1aad19')
70-
context.setStrokeStyle('rgba(1,1,1,0)')
71-
context.fill()
72-
context.stroke()
73-
}
21+
// #ifndef APP-PLUS || H5
22+
23+
var ctx = null,
24+
interval = null;
25+
26+
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
27+
this.canvasWidth = canvasWidth
28+
this.canvasHeight = canvasHeight
29+
this.ctx = ctx
30+
this.x = x
31+
this.y = y
32+
this.vx = vx
33+
this.vy = vy
34+
this.radius = 5
35+
}
36+
37+
Ball.prototype.draw = function() {
38+
this.ctx.setFillStyle('#007AFF')
39+
this.ctx.beginPath()
40+
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
41+
this.ctx.closePath()
42+
this.ctx.fill()
43+
}
44+
45+
Ball.prototype.move = function() {
46+
this.x += this.vx
47+
this.y += this.vy
48+
// 回到中心
49+
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
50+
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
51+
// this.x = this.canvasWidth / 2
52+
// this.y = this.canvasHeight / 2
53+
// }
7454
75-
ball(p.x, this.canvasWidth/2)
76-
ball(this.canvasWidth/2, p.y)
77-
ball(this.canvasWidth - p.x, this.canvasWidth/2)
78-
ball(this.canvasWidth/2, this.canvasWidth - p.y)
79-
ball(p.x, p.y)
80-
ball(this.canvasWidth - p.x, this.canvasWidth - p.y)
81-
ball(p.x, this.canvasWidth - p.y)
82-
ball(this.canvasWidth - p.x, p.y)
55+
// 边框反弹
56+
if (this.x < this.radius) {
57+
this.vx = Math.abs(this.vx)
58+
return
59+
}
60+
if (this.x > this.canvasWidth - this.radius) {
61+
this.vx = -Math.abs(this.vx)
62+
}
63+
if (this.y < this.radius) {
64+
this.vy = Math.abs(this.vy)
65+
return
66+
}
67+
if (this.y > this.canvasWidth - this.radius) {
68+
this.vy = -Math.abs(this.vy)
69+
}
70+
}
8371
84-
context.draw()
85-
}
86-
}
87-
}
72+
function getDistance(x, y) {
73+
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
74+
}
75+
76+
// #endif
77+
78+
export default {
79+
data() {
80+
return {
81+
title: 'canvas',
82+
canvasWidth: 0,
83+
start: false,
84+
ballList: []
85+
}
86+
},
87+
onReady: function() {
88+
this.$nextTick(() => {
89+
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
90+
this.canvasWidth = data.width
91+
// #ifdef APP-PLUS || H5
92+
this.start = true
93+
// #endif
94+
// #ifndef APP-PLUS || H5
95+
ctx = uni.createCanvasContext('canvas')
96+
this.drawBall()
97+
// #endif
98+
}).exec()
99+
})
100+
},
101+
// #ifndef APP-PLUS || H5
102+
onUnload: function() {
103+
clearInterval(interval);
104+
},
105+
methods: {
106+
drawBall: function() {
107+
var canvasWidth = this.canvasWidth,
108+
canvasHeight = this.canvasWidth,
109+
speed = 3,
110+
ballList = [],
111+
layer = 3,
112+
ballInlayer = 20
113+
for (var i = 0; i < layer; i++) {
114+
var radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
115+
for (var j = 0; j < ballInlayer; j++) {
116+
var deg = j * 2 * Math.PI / ballInlayer,
117+
sin = Math.sin(deg),
118+
cos = Math.cos(deg),
119+
x = radius * cos + canvasWidth / 2,
120+
y = radius * sin + canvasHeight / 2,
121+
vx = speed * cos,
122+
vy = speed * sin
123+
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx))
124+
}
125+
}
126+
127+
function animate(ballList) {
128+
// ctx.clearRect(0, 0, canvasWidth, canvasHeight)
129+
ballList.forEach(function(item) {
130+
item.move()
131+
item.draw()
132+
})
133+
ctx.draw()
134+
}
135+
136+
interval = setInterval(function() {
137+
animate(ballList)
138+
}, 17)
139+
}
140+
}
141+
// #endif
142+
}
88143
</script>
89144

90145
<style>
91-
.canvas {
92-
width: 610upx;
93-
height: 610upx;
94-
background-color: #fff;
95-
}
96-
</style>
146+
.page-body-wrapper {
147+
text-align: center;
148+
}
149+
150+
.canvas {
151+
width: 610rpx;
152+
height: 610rpx;
153+
margin: auto;
154+
background-color: #fff;
155+
}
156+
</style>

‎pages/tabBar/component/component.nvue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,13 @@
9797

9898
},
9999
// #endif
100+
{
101+
id: 'canvas',
102+
name: '画布',
103+
open: false,
104+
pages: ['canvas']
105+
106+
},
100107
// #ifdef APP-PLUS
101108
{
102109
id: 'web-view',

0 commit comments

Comments
 (0)