<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>
2***@qq.com
- 发布：2023-08-09 10:18
- 更新：2023-12-04 21:21
- 阅读：1713
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
第三方开发者工具版本号： stable 1.06.2306020
基础库版本号： 2.33.0
项目创建方式： HBuilderX
示例代码：
操作步骤：
用 HBuilderX 新建空白项目，然后将上述代码粘贴到 index.vue 中运行即可
用 HBuilderX 新建空白项目，然后将上述代码粘贴到 index.vue 中运行即可
预期结果：
见附件截图
见附件截图
实际结果：
见附件截图
见附件截图
bug描述：
使用 uniapp 开发微信小程序时，调用 uniapp 提供的接口在 canvas 上绘制矩形、图片等内容，在小程序模拟器中不能显示（控制台可以正常打印图片信息和 canvas 上下文对象信息）。
解决方法已找到：删除 canvas 标签的 type="2d" 即可，请官方解释一下原因，谢谢！
爱豆豆 - 办法总比困难多
请参考微信文档中的canvas 2d示例
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
我没有添加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" />-
引入getCurrentInstance,
instant= getCurrentInstance()
在创建canvascontext时,把实例作为第二个参数
uni.createCanvasContext('firstCanvas',instant)
应该是组件未找到实例的问题,可以试一下
2023-12-05 10:30
-
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