2***@qq.com
2***@qq.com
  • 发布:2023-08-09 10:18
  • 更新:2023-12-04 21:21
  • 阅读:2183

关于uniapp使用canvas绘制内容在微信小程序端不生效的问题

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.7

第三方开发者工具版本号: stable 1.06.2306020

基础库版本号: 2.33.0

项目创建方式: HBuilderX

示例代码:
<template>  
  <view>  
    <canvas  
      type="2d"  
      id="my-canvas"  
      canvas-id="my-canvas"  
      disable-scroll="true"  
    ></canvas>  
  </view>  
</template>  

<script setup>  
import { onReady } from '@dcloudio/uni-app'  

onReady(() => {  
  uni.getImageInfo({  
    // src: '/static/map.png',  
    src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',  
    success: (image) => {  
      console.log(image)  

      const ctx = uni.createCanvasContext('my-canvas')  
      console.log(ctx)  

      ctx.moveTo(10, 10)  
      ctx.rect(10, 10, 100, 50)  
      ctx.lineTo(110, 60)  
      ctx.stroke()  
      ctx.save()  
      ctx.draw()  

      ctx.drawImage(image.path, 0, 0, 500, 500)  
      // ctx.draw()  
    },  
    fail: () => {  
      console.log(err)  
    }  
  })  
})  
</script>  

<style>  
#my-canvas {  
  width: 100%;  
  height: 500rpx;  
  border: 1px solid red;  
}  
</style>

操作步骤:

用 HBuilderX 新建空白项目,然后将上述代码粘贴到 index.vue 中运行即可

预期结果:

见附件截图

实际结果:

见附件截图

bug描述:

使用 uniapp 开发微信小程序时,调用 uniapp 提供的接口在 canvas 上绘制矩形、图片等内容,在小程序模拟器中不能显示(控制台可以正常打印图片信息和 canvas 上下文对象信息)。

解决方法已找到:删除 canvas 标签的 type="2d" 即可,请官方解释一下原因,谢谢!

2023-08-09 10:18 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

请参考微信文档中的canvas 2d示例
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

  • 2***@qq.com (作者)

    大概明白是旧版和新版canvas的问题了,但是为什么https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#nodesref-node中type="2d"就获取不到canvas节点信息?微信新版的canvas应该是依赖于canvas节点进行操作的

    2023-08-10 11:25

  • t***@163.com

    真的是服你们,把type属性去掉,小程序才能正常显示canvas

    2023-09-21 18:12

3***@qq.com

3***@qq.com - 前端人员

请问真机调试下可以显示么

1***@qq.com

1***@qq.com

我没有添加type="2d",直接从uni官网copy下来的代码, 但是在小程序端还是不生效
代码如下

onReady(() => {  
  initCanvas()  
})  
function initCanvas() {  
  const 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()  
}
<canvas id="firstCanvas" class="absolute bottom-2 z-10" border="~ solid red" style="width: 300px; height: 200px;" canvas-id="firstCanvas" />
  • 海洋_2023

    引入getCurrentInstance,


    instant= getCurrentInstance()

    在创建canvascontext时,把实例作为第二个参数

    uni.createCanvasContext('firstCanvas',instant)


    应该是组件未找到实例的问题,可以试一下

    2023-12-05 10:30

  • 1***@qq.com

    回复 海洋_2023: 好的, 感谢,

    2023-12-06 14:53

要回复问题请先登录注册