vue使用canvas画图画不出来

Vue中Canvas画图遇到的诡异问题

最新推荐文章于 2024-01-10 17:33:13 发布

原创最新推荐文章于 2024-01-10 17:33:13 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #canvas #vue

在尝试使用Vue构建手势密码功能时，通过canvas进行全屏绘图。然而，将canvas宽度和高度设置为窗口尺寸后，canvas区域却显示为空白。经过排查，发现将`this.wid = window.innerWidth`和`this.hei = window.innerHeight`这两行代码放在组件初始化时会导致问题，但若将它们放在data属性或created钩子中则正常运行。这个问题的原因尚不清楚，寻求社区中大佬的帮助。

部署运行你感兴趣的模型镜像

使用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
						})
					}
				}