当前位置：首页 > uni-app

uniapp画线

2026-03-26 15:14:10uni-app

在UniApp中绘制线条可以通过多种方式实现，以下是几种常见的方法：

使用Canvas绘制线条

Canvas是HTML5提供的绘图API，UniApp中可以直接使用Canvas来绘制线条。

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas', this);
    ctx.setStrokeStyle('#000000');
    ctx.setLineWidth(1);
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 200);
    ctx.stroke();
    ctx.draw();
  }
}
</script>

使用CSS绘制线条

通过CSS的border属性可以快速实现简单的线条效果。

<view style="width: 200px; height: 1px; background-color: #000000;"></view>

使用SVG绘制线条

SVG是一种矢量图形格式，适合绘制复杂的线条和图形。

<template>
  <view>
    <svg width="200" height="200">
      <line x1="50" y1="50" x2="150" y2="150" stroke="#000000" stroke-width="2" />
    </svg>
  </view>
</template>

使用第三方组件库

UniApp支持许多第三方UI组件库，如uView、ColorUI等，这些库通常提供了丰富的绘图组件。

<template>
  <view>
    <u-line color="#000000" length="200"></u-line>
  </view>
</template>

动态绘制线条

如果需要动态绘制线条，可以结合数据绑定和Canvas API实现。

uniapp画线

<template>
  <view>
    <canvas canvas-id="dynamicCanvas" style="width: 300px; height: 300px;"></canvas>
    <button @click="drawLine">绘制线条</button>
  </view>
</template>

<script>
export default {
  methods: {
    drawLine() {
      const ctx = uni.createCanvasContext('dynamicCanvas', this);
      ctx.setStrokeStyle('#FF0000');
      ctx.setLineWidth(2);
      ctx.moveTo(50, 50);
      ctx.lineTo(250, 250);
      ctx.stroke();
      ctx.draw();
    }
  }
}
</script>