<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>
- 发布: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 中运行即可
预期结果:
见附件截图
见附件截图
实际结果:
见附件截图
见附件截图
爱豆豆 - 办法总比困难多
请参考微信文档中的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" />
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