- 当前 Bug 的表现(可附上截图)
单独 fillRect 会显示绿色方块,添加 drawImage 代码则绿色方块不显示
- 预期表现
预期是显示绿色方块和Image。
模拟器上显示正常。
- 复现路径
单独 fillRect 会显示绿色方块,添加 drawImage 代码则绿色方块不显示
- 提供一个最简复现 Demo
机型:华为P8 MAX
微信版本号:7.04
系统版本号:v1.02.1905151
能复现问题的代码片段:
//import './js/libs/weapp-adapter'
//import './js/libs/symbol'
//import Main from './js/main'
//new Main()
const canvas = wx.createCanvas()
const context = canvas.getContext('2d') // 创建一个 2d context
context.fillStyle = '#1aad19' // 矩形颜色
function drawRect(x, y) {
context.clearRect(x, y - 1, 100, 100)
context.fillRect(x, y, 100, 100)
}
drawRect(canvas.width / 2 - 50, 0)
const image = wx.createImage()
const imgX = canvas.width / 2 - 50
let imgY = 500
image.onload = function () {
context.drawImage(image, imgX, imgY)
}
image.src = 'images/hero.png'
补充两个问题(在更新后的代码片段中):
2,触发onTouchStart后,初始化时绘制的飞机图片也消失了
3,后绘制的image2被先绘制的image1遮盖,如果图片有叠加关系,该如何设置呢? 谢谢!
如果是在 Android 下,需要每次清空画布。
谢谢您的答复!
drawImage前增加clearRect清空局部画布,已fillRect的区域依然不显示。
- 当前 Bug 的表现(可附上截图)
单独 fillRect 会显示绿色方块,添加 drawImage 代码则绿色方块不显示
机型:华为P8 MAX
微信版本号:7.04
系统版本号:v1.02.1905151
- 预期表现
预期是显示绿色方块和Image。 模拟器上显示正常。
- 复现路径
1,注释 game.js 中所有代码
2, 添加代码片段
const canvas = wx.createCanvas()
const context = canvas.getContext('2d') // 创建一个 2d context
context.fillStyle = '#1aad19' // 矩形颜色
function drawRect(x, y) {
context.clearRect(x, y, 100, 100)
context.fillRect(x, y, 100, 100)
}
drawRect(canvas.width / 2 - 50, 0)
const image = wx.createImage()
const imgX = canvas.width / 2 - 50
let imgY = 200
image.onload = function () {
context.clearRect(imgX, imgY, image.width, image.height)
context.drawImage(image, imgX, imgY)
}
image.src = 'images/hero.png'
3,fillRect 的绿色方块不显示
您好,请使用以下链接提供能复现问题的简单代码片段,方便技术人员为您解答,感谢配合(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
您好,感谢您的回复! 代码片段链接已补充在提问中,请参考。
你这样试一下看,可否显示正常:
const canvas = wx.createCanvas()
const context = canvas.getContext('2d') // 创建一个 2d context
context.fillStyle = '#1aad19' // 矩形颜色
context.fillRect(canvas.width / 2 - 50, 0 100, 100)
const image = wx.createImage()
const imgX = canvas.width / 2 - 50;
const imgY = 400;
image.src = 'images/hero.png'
context.drawImage(image, imgX, imgY)
我也遇到,绘制的颜色块真机上面就是不显示,模拟器能显示,我的是华为nova5
楼主解决了没?感觉这个canvas2d问题很多,但几个月了一直没人解决
我也遇到了类似的问题,https://developers.weixin.qq.com/community/minigame/doc/000062d35f8bf885c8091fd6f5b400
楼主解决了没有