微信小程序canvas绘制不显示

分类：uni-app

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

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 专业版

HBuilderX类型：正式

HBuilderX版本号： 3.1.13

第三方开发者工具版本号： 1.05.2105170

基础库版本号： 2.17.0

项目创建方式： HBuilderX

示例代码：

<template>  
  <view class="content">  
    <canvas canvas-id="canvas" type="2d" style="border: 1px solid red;"></canvas>  
  </view>  
</template>  

<script>  
  export default {  
    onReady() {  
      let ctx = uni.createCanvasContext('canvas')  
      ctx.setFillStyle('blue')  
      ctx.fillRect(120, 10, 100, 100)  
      ctx.drawImage('../../static/logo.png', 10, 10, 100, 100)  
      ctx.draw()  
    }  
  }  
</script>

操作步骤：

canvas加`type="2d"`属性，运行到小程序模拟器-->微信开发者工具

预期结果：

canvas正常绘制

实际结果：

canvas空白

bug描述：

canvas设置type="2d"属性，编译成微信小程序不显示，不加type属性则正常，H5端一切正常。

2021-05-18 11:32 负责人:无分享

1 个回复

陌上华年

加上type="2d"就不是你现在写的方法了。。

<template>    
  <view class="content">    
    <canvas id="myCanvas" type="2d" style="border: 1px solid red;"></canvas>    
  </view>    
</template>

const query = uni.createSelectorQuery()  
    query.select('#myCanvas')  
      .fields({ node: true, size: true })  
      .exec((res) => {  
        const canvas = res[0].node  
        const ctx = canvas.getContext('2d')  

        const dpr = uni.getSystemInfoSync().pixelRatio  
        canvas.width = res[0].width * dpr  
        canvas.height = res[0].height * dpr  
        ctx.scale(dpr, dpr)  

        ctx.fillRect(0, 0, 100, 100)  
      })

该问题目前已经被锁定, 无法添加新回复

微信小程序canvas绘制不显示

操作步骤：

canvas加`type="2d"`属性，运行到小程序模拟器-->微信开发者工具

预期结果：

canvas正常绘制

实际结果：

canvas空白

bug描述：

1 个回复

公告

相关问题

微信小程序canvas绘制不显示

操作步骤： canvas加type="2d"属性，运行到小程序模拟器-->微信开发者工具

预期结果： canvas正常绘制

实际结果： canvas空白

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

canvas加`type="2d"`属性，运行到小程序模拟器-->微信开发者工具

预期结果：

canvas正常绘制

实际结果：

canvas空白