使用vue做一个手势密码,相当于手机图案解锁
canvas要占全屏所以获取宽高赋值
使用canvas画图,绘制图案
代码
<template>
<div id="handlogin">
<canvas id="theone" ref="one" :width="wid" :height="hei" @mousedown="draw"></canvas>
<canvas id="thetwo" ref="two" :width="wid" :height="hei"></canvas>
</div>
</template>
data() {
return {
wid: null,
hei: null,
theone: null,
thetwo: null,
dots: []
}
},
mounted() {
this.init();
},
methods: {
init() {
this.wid = window.innerWidth;
this.hei = window.innerHeight;
console.log(window.innerWidth,window.innerHeight)
for (let i = 1; i < 4; i++) {
for (let j = 1; j < 4; j++) {
let x = this.wid / 4 * j;
let y = this.hei / 4 * i;
this.dots.push({
x,
y,
num: (i - 1) * 3 + j
})
}
}
this.theone = this.$refs.one; // eslint-disable-line no-unused-vars
this.thetwo = this.$refs.two; // eslint-disable-line no-unused-vars
let ctx = this.thetwo.getContext("2d");
this.dots.forEach(item=>{
ctx.beginPath();
ctx.arc(item.x, item.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = "#000";
ctx.fill();
ctx.stroke();
})
},
奇怪的事发生了代码没有报错,但是页面就是啥也没有,查看标签都正常,就是canvas一片空白。检查几遍代码都没问题,就这么点代码我一直看不出问题在哪,后来干脆挨个注释看看到底哪出问题。结果居然是两句赋值出问题了
this.wid = window.innerWidth;
this.hei = window.innerHeight;
就这两句,没了这两句就没问题了,可是不赋值不行,事先在data里面写死值,没问题。说明可以绑定数据
换个地方,把这两句放到create函数里也没问题,就是不能直接放一起
有大佬知道为啥吗
created() {
this.wid = window.innerWidth;
this.hei = window.innerHeight;
},
methods: {
init() {
console.log(window.innerWidth,window.innerHeight)
for (let i = 1; i < 4; i++) {
for (let j = 1; j < 4; j++) {
let x = window.innerWidth / 4 * j;
let y = window.innerHeight / 4 * i;
this.dots.push({
x,
y,
num: (i - 1) * 3 + j
})
}
}