uni-app使用canvas适配手机宽高进行渲染

uni-app使用canvas适配手机宽高进行渲染

javascript 复制代码
<template>
	<view class="countStyle">
		<view class="bgimg" :style="{ 'background-image': 'url(' + imager + ')', 'height': bgHeight + 'px' }">
			<canvas canvas-id="firstCanvas" class="cansStyle" />
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import config from '@/config';

	const imager = ref(config.config.baseUrl + '/wximages/menu/unloadWork.png');
	const canvasWidth = uni.getSystemInfoSync().windowWidth;
	const canvasHeight = uni.getSystemInfoSync().windowHeight;

	// 计算背景图片高度以保持等比缩放
	const bgImageAspectRatio = 450 / 600; // 背景图片的原始宽高比
	const bgHeight = canvasWidth / bgImageAspectRatio;

	const context = uni.createCanvasContext('firstCanvas');

	const points = [
		{ x: 100 * canvasWidth / 375, y: 100 * bgHeight / 667 },
		{ x: 150 * canvasWidth / 375, y: 100 * bgHeight / 667 },
		{ x: 150 * canvasWidth / 375, y: 150 * bgHeight / 667 },
		{ x: 50 * canvasWidth / 375, y: 150 * bgHeight / 667 },
	];

	onMounted(() => {
		drawPolyline();
	});

	function drawPolyline() {
		context.setStrokeStyle("#ffff00");
		context.setLineWidth(10);

		context.moveTo(points[0].x, points[0].y);

		for (let i = 1; i < points.length; i++) {
			context.lineTo(points[i].x, points[i].y);
		}

		context.stroke();
		context.draw();
	}
</script>

<style lang="scss" scoped>
	.countStyle {
		overflow: auto;
	}

	.bgimg {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
	}

	.cansStyle {
		width: 100%;
		height: 100%;
	}
</style>
相关推荐
Mintopia4 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李6 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风7 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录8 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia8 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽10 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥11 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023415 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder20 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder20 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端