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>