vue使用canvas画图画不出来

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用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
						})
					}
				}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值