小程序
小游戏
企业微信
微信支付
扫描小程序码分享
横屏时,canvas宽度设置100%,在Ios上显示不正常
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
弄一个 [ 能复现问题的简单的 ] 代码片段
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
waveCount = 12, // 波浪个数
// startX = startX,
startY = 160, // canvas 高度
progress = $progress,// 波浪位置的高度
d2 = waveWidth / waveCount,// 单个波浪的宽度
d = d2 / 2,
hd = d / 2;
const query = wx.createSelectorQuery()
var c = query.select($canvasID);
c.width = this.data.canvasWidth;
c.height = 212;
query.select($canvasID).fields({ node: true, size: false }).exec((res) => {
console.log(res)
const canvas = res[0].node
const ctx = canvas.getContext('2d')
function move () {
offset -= 5;
if (-1 * offset === d2) offset = 0;
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = $maveColor;
ctx.beginPath();
let offsetY = startY - progress;
ctx.moveTo(startX - offset, offsetY);
for (let i = 0; i < waveCount; i++) {
let dx = i * d2;
let offsetX = dx + startX - offset;
ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
}
ctx.lineTo(startX + waveWidth, 3000);
ctx.lineTo(startX, 3000);
ctx.fill();
setTimeout(move, $time / 200); //速度
move();
})
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
弄一个 [ 能复现问题的简单的 ] 代码片段
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
waveCount = 12, // 波浪个数
// startX = startX,
startY = 160, // canvas 高度
progress = $progress,// 波浪位置的高度
d2 = waveWidth / waveCount,// 单个波浪的宽度
d = d2 / 2,
hd = d / 2;
const query = wx.createSelectorQuery()
var c = query.select($canvasID);
c.width = this.data.canvasWidth;
c.height = 212;
query.select($canvasID).fields({ node: true, size: false }).exec((res) => {
console.log(res)
const canvas = res[0].node
const ctx = canvas.getContext('2d')
function move () {
offset -= 5;
if (-1 * offset === d2) offset = 0;
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = $maveColor;
ctx.beginPath();
let offsetY = startY - progress;
ctx.moveTo(startX - offset, offsetY);
for (let i = 0; i < waveCount; i++) {
let dx = i * d2;
let offsetX = dx + startX - offset;
ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
}
ctx.lineTo(startX + waveWidth, 3000);
ctx.lineTo(startX, 3000);
ctx.fill();
setTimeout(move, $time / 200); //速度
}
move();
})