canvas

画布。 属性说明 注意事项：

  • native-component。
  • 示例：
    1. <template>    <view>        <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>        <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>        <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" @error="canvasIdErrorCallback"></canvas>    </view></template>
    1. export default {    onReady: function (e) {        var context = uni.createCanvasContext('firstCanvas')        context.setStrokeStyle("#00ff00")        context.setLineWidth(5)        context.rect(0, 0, 200, 200)        context.stroke()        context.setStrokeStyle("#ff0000")        context.setLineWidth(2)        context.moveTo(160, 100)        context.arc(100, 100, 60, 0, 2 * Math.PI, true)        context.moveTo(140, 100)        context.arc(100, 100, 40, 0, Math.PI, false)        context.moveTo(85, 80)        context.arc(80, 80, 5, 0, 2 * Math.PI, true)        context.moveTo(125, 80)        context.arc(120, 80, 5, 0, 2 * Math.PI, true)        context.stroke()        context.draw()    },    methods: {        canvasIdErrorCallback: function (e) {            console.error(e.detail.errMsg)        }    }}
    uni.createCanvasContext 扩展阅读 图表 、 头像裁剪 、 海报 、 二维码 。 uChart组件。但由于小程序和App在跟手操作和js操作帧动画方面性能不如web，如果这方面的需求，建议在web-view组件中使用html内嵌原版echart。

在 GitHub 上编辑此页面！