134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
Vue
<template>
|
|
<div class="canvas_container" @click="rectClick">
|
|
<!-- <div class="canvas_container"> -->
|
|
<canvas id="myCanvas" width="946" height="982"></canvas>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 屏幕分辨率为1920*1080
|
|
export default {
|
|
data () {
|
|
return {
|
|
af: undefined,
|
|
points: [{x1: 305, y1: 518, x2: 305, y2: 500}, {x1: 419, y1: 474, x2: 419, y2: 456}, {x1: 453, y1: 259, x2: 550, y2: 259}, {x1: 830, y1: 362, x2: 830, y2: 438}, {x1: 830, y1: 461, x2: 830, y2: 518}, {x1: 830, y1: 473, x2: 488, y2: 473}, {x1: 488, y1: 473, x2: 488, y2: 518}],
|
|
dot4: {x1: 305, y1: 518, x2: 305, y2: 500},
|
|
dot5: {x1: 419, y1: 474, x2: 419, y2: 456},
|
|
dot6: {x1: 453, y1: 259, x2: 550, y2: 259},
|
|
line2: 1,
|
|
line3: 1,
|
|
dot7: {x1: 830, y1: 362, x2: 830, y2: 438},
|
|
dot8: {x1: 830, y1: 461, x2: 830, y2: 518},
|
|
dot9: {x1: 830, y1: 473, x2: 488, y2: 516},
|
|
dot10: {x1: 488, y1: 473, x2: 488, y2: 518},
|
|
line4: 1
|
|
}
|
|
},
|
|
mounted () {
|
|
this.animate()
|
|
},
|
|
destroyed () {
|
|
window.cancelAnimationFrame(this.af)
|
|
this.af = undefined
|
|
},
|
|
methods: {
|
|
rectClick () {
|
|
var ev = window.event
|
|
// 获取相对于当前所指向对象的位置坐标
|
|
alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
|
|
},
|
|
drawPoint (ctx, x, y) {
|
|
ctx.beginPath()
|
|
ctx.arc(x, y, 4, 0, 2 * Math.PI)
|
|
ctx.fillStyle = 'yellow'
|
|
ctx.fill()
|
|
ctx.lineWidth = 1
|
|
ctx.strokeStyle = 'yellow'
|
|
ctx.closePath()
|
|
},
|
|
drawLine (ctx, x1, y1, x2, y2) {
|
|
ctx.beginPath()
|
|
ctx.moveTo(x1, y1)
|
|
ctx.lineTo(x2, y2)
|
|
ctx.strokeStyle = '#00c8da'
|
|
ctx.lineWidth = 1
|
|
ctx.stroke()
|
|
},
|
|
animate () {
|
|
let canvas = document.getElementById('myCanvas')
|
|
let ctx = canvas.getContext('2d')
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
if (this.line2 === 1) {
|
|
this.dot4.y1 -= 1
|
|
this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)
|
|
if (this.dot4.y1 === this.dot4.y2) {
|
|
this.dot4.y1 = 518
|
|
this.line2 = 2
|
|
}
|
|
}
|
|
if (this.line2 === 2) {
|
|
this.dot5.y1 -= 1
|
|
this.drawPoint(ctx, this.dot5.x1, this.dot5.y1)
|
|
if (this.dot5.y1 === this.dot5.y2) {
|
|
this.dot5.y1 = 474
|
|
this.line2 = 1
|
|
}
|
|
}
|
|
if (this.line3 === 1) {
|
|
this.dot6.x1 += 1
|
|
this.drawPoint(ctx, this.dot6.x1, this.dot6.y1)
|
|
if (this.dot6.x1 === this.dot6.x2) {
|
|
this.dot6.x1 = 455
|
|
this.line3 = 1
|
|
}
|
|
}
|
|
if (this.line4 === 1) {
|
|
this.dot7.y1 += 1
|
|
this.drawPoint(ctx, this.dot7.x1, this.dot7.y1)
|
|
if (this.dot7.y1 === this.dot7.y2) {
|
|
this.dot7.y1 = 362
|
|
this.line4 = 2
|
|
}
|
|
}
|
|
if (this.line4 === 2) {
|
|
this.dot8.y1 += 1
|
|
this.drawPoint(ctx, this.dot8.x1, this.dot8.y1)
|
|
if (this.dot8.y1 === this.dot8.y2) {
|
|
this.dot8.y1 = 461
|
|
this.line4 = 3
|
|
}
|
|
}
|
|
if (this.line4 === 3) {
|
|
this.dot9.x1 -= 1
|
|
this.drawPoint(ctx, this.dot9.x1, this.dot9.y1)
|
|
if (this.dot9.x1 === this.dot9.x2) {
|
|
this.dot9.x1 = 830
|
|
this.line4 = 4
|
|
}
|
|
}
|
|
if (this.line4 === 4) {
|
|
this.dot10.y1 += 1
|
|
this.drawPoint(ctx, this.dot10.x1, this.dot10.y1)
|
|
if (this.dot10.y1 === this.dot10.y2) {
|
|
this.dot10.y1 = 516
|
|
this.line4 = 1
|
|
}
|
|
}
|
|
for (let i = 0; i < this.points.length; i++) {
|
|
this.drawLine(ctx, this.points[i].x1, this.points[i].y1, this.points[i].x2, this.points[i].y2)
|
|
}
|
|
this.af = window.requestAnimationFrame(this.animate)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
@import '~@css/mixin'
|
|
.canvas_container
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
_wh(946px, 982px)
|
|
// background red
|
|
</style>
|