uni-app：canvas-绘制图形4（获取画布宽高，根据画布宽高进行图形绘制）

效果

代码

var width = '';
var height = ''; 
const query = uni.createSelectorQuery();
//获取宽度
query.select('#firstCanvas').fields({
    size: true
 }, (res) => {
     width = res.width;
     height = res.height;
}).exec();
 console.log('宽度'+width);
 console.log('高度'+height);

<template><view><!-- 创建了一个宽度为300像素，高度为200像素的canvas元素。canvas-id属性被设置为"firstCanvas"，可以用来在JavaScript中获取该canvas元素的上下文对象。 --><canvas style="width:200px; height:300px; border: 1px solid black;" canvas-id="firstCanvas"id="firstCanvas"></canvas></view>
</template>
<script>export default {onReady: function(e) {//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个 <canvas> 元素上进行绘制。var context = uni.createCanvasContext('firstCanvas')var width = '';var height = ''; const query = uni.createSelectorQuery();//获取宽度query.select('#firstCanvas').fields({size: true}, (res) => {width = res.width;height = res.height;}).exec();console.log('宽度'+width);console.log('高度'+height);//绘制路径中的线条。context.setStrokeStyle("#aaaaff")// 设置线条的宽度为2个像素。context.setLineWidth(2)// 绘制横线context.beginPath(); // 开始路径绘制context.moveTo(width/2, 0); // 将起点移动到 (0, 100)context.lineTo(width/2, 50);context.stroke(); // 绘制线条var x1 = width/4; // 第一个竖线的起点 x 坐标var y1 = 50; // 第一个竖线的起点 y 坐标var y2 = 30; // 短竖线的高度var horizontalLength = width/2; // 横线的长度context.beginPath();context.moveTo(x1, y1 + y2); // 移动到第一个短竖线的起点context.lineTo(x1, y1); // 绘制第一个短竖线context.moveTo(x1 + horizontalLength, y1 + y2); // 移动到横线的右端下方context.lineTo(x1 + horizontalLength, y1); // 绘制第二个短竖线context.moveTo(x1, y1); // 移动到横线的左端下方context.lineTo(x1 + horizontalLength, y1); // 绘制横线/*  */context.stroke(); // 绘制线条// 将之前的绘图操作渲染到画布上。context.draw()},methods: {}}
</script>

这里由于我对canvas设置了边框border:1px solid black.所以宽高都要分别增加1px+1px=2px的像素值