canvas组件setInterval绘制图片时,华为快应用卡顿怎么办?
What Should I Do If a HUAWEI Quick App Freezes When the canvas Component Draws an Image Using setInterval?
在我的华为快应用中,使用setInterval函数循环执行使用canvas的代码。但是在华为phone上渲染图片时,快应用卡住了。
出现异常的代码如下:
click0() {
this.speed = 0.3
let ctx = this.$element('canvas').getContext('2d')
setInterval(() => {
this.num0 += 2
this.noise = Math.min(0.5, 1) * this.MAX
this._draw(ctx)
this.MAX <= 200 && (this.MAX += 4)
}, 20)
},
_draw(ctx) {
this.phase = (this.phase + this.speed) % (Math.PI * 64)
ctx.clearRect(0, 0, this.width, this.height)
this._drawLine(ctx, -2, 'rgba(0, 194, 255, 0.2)')
this._drawLine(ctx, -6, 'rgba(0, 194, 255, 0.4)')
this._drawLine(ctx, 4, 'rgba(0, 194, 255, 0.6)')
this._drawLine(ctx, 2, 'rgba(0, 194, 255, 0.8)')
this._drawLine(ctx, 1, 'rgba(0, 194, 255, 1)', 4)
},
您可以先调用API查询设备信息获取服务商,判断快应用是否支持华为快应用
如果是这样,请将时间间隔设置为长于 100 毫秒。示例代码如下:
onShow: function () {
var that = this
device.getInfo({
success: function (ret) {
console.log("handling success:", JSON.stringify(ret));
that.engineProvider = ret.engineProvider;
},
fail: function (erromsg, errocode) {
console.log("message:", erromsg, errocode);
}
})
},
click0() {
var that = this
this.speed = 0.3
console.log(that.engineProvider)
let ctx = this.$element('canvas').getContext('2d')
if (that.engineProvider === "huawei") {
setInterval(() => {
this.num0 += 2
this.noise = Math.min(0.5, 1) * this.MAX
this._draw(ctx)
this.MAX <= 200 && (this.MAX += 4)
}, 120)
} else {
setInterval(() => {
this.num0 += 2
this.noise = Math.min(0.5, 1) * this.MAX
this._draw(ctx)
this.MAX <= 200 && (this.MAX += 4)
}, 20)
}
},
_draw(ctx) {
this.phase = (this.phase + this.speed) % (Math.PI * 64)
ctx.clearRect(0, 0, this.width, this.height)
this._drawLine(ctx, -2, 'rgba(0, 194, 255, 0.2)')
this._drawLine(ctx, -6, 'rgba(0, 194, 255, 0.4)')
this._drawLine(ctx, 4, 'rgba(0, 194, 255, 0.6)')
this._drawLine(ctx, 2, 'rgba(0, 194, 255, 0.8)')
this._drawLine(ctx, 1, 'rgba(0, 194, 255, 1)', 4)
},
_drawLine(ctx, attenuation, color, width) {
ctx.save()
ctx.moveTo(0, 0);
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = width || 1;
var x, y;
for (var i = -this.K; i <= this.K; i += 0.01) {
x = this.width * ((i + this.K) / (this.K * 2))
y = this.height / 2 + this.noise * this._globalAttenuationFn(i) * (1 / attenuation) * Math.sin(this.F * i - this.phase)
ctx.lineTo(x, y)
}
ctx.stroke()
ctx.restore()
},
详情请参考:
在我的华为快应用中,使用setInterval函数循环执行使用canvas的代码。但是在华为phone上渲染图片时,快应用卡住了。 出现异常的代码如下:
click0() {
this.speed = 0.3
let ctx = this.$element('canvas').getContext('2d')
setInterval(() => {
this.num0 += 2
this.noise = Math.min(0.5, 1) * this.MAX
this._draw(ctx)
this.MAX <= 200 && (this.MAX += 4)
}, 20)
},
_draw(ctx) {
this.phase = (this.phase + this.speed) % (Math.PI * 64)
ctx.clearRect(0, 0, this.width, this.height)
this._drawLine(ctx, -2, 'rgba(0, 194, 255, 0.2)')
this._drawLine(ctx, -6, 'rgba(0, 194, 255, 0.4)')
this._drawLine(ctx, 4, 'rgba(0, 194, 255, 0.6)')
this._drawLine(ctx, 2, 'rgba(0, 194, 255, 0.8)')
this._drawLine(ctx, 1, 'rgba(0, 194, 255, 1)', 4)
},
您可以先调用API查询设备信息获取服务商,判断快应用是否支持华为快应用
如果是这样,请将时间间隔设置为长于 100 毫秒。示例代码如下:
onShow: function () {
var that = this
device.getInfo({
success: function (ret) {
console.log("handling success:", JSON.stringify(ret));
that.engineProvider = ret.engineProvider;
},
fail: function (erromsg, errocode) {
console.log("message:", erromsg, errocode);
}
})
},
click0() {
var that = this
this.speed = 0.3
console.log(that.engineProvider)
let ctx = this.$element('canvas').getContext('2d')
if (that.engineProvider === "huawei") {
setInterval(() => {
this.num0 += 2
this.noise = Math.min(0.5, 1) * this.MAX
this._draw(ctx)
this.MAX <= 200 && (this.MAX += 4)
}, 120)
} else {
setInterval(() => {
this.num0 += 2
this.noise = Math.min(0.5, 1) * this.MAX
this._draw(ctx)
this.MAX <= 200 && (this.MAX += 4)
}, 20)
}
},
_draw(ctx) {
this.phase = (this.phase + this.speed) % (Math.PI * 64)
ctx.clearRect(0, 0, this.width, this.height)
this._drawLine(ctx, -2, 'rgba(0, 194, 255, 0.2)')
this._drawLine(ctx, -6, 'rgba(0, 194, 255, 0.4)')
this._drawLine(ctx, 4, 'rgba(0, 194, 255, 0.6)')
this._drawLine(ctx, 2, 'rgba(0, 194, 255, 0.8)')
this._drawLine(ctx, 1, 'rgba(0, 194, 255, 1)', 4)
},
_drawLine(ctx, attenuation, color, width) {
ctx.save()
ctx.moveTo(0, 0);
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = width || 1;
var x, y;
for (var i = -this.K; i <= this.K; i += 0.01) {
x = this.width * ((i + this.K) / (this.K * 2))
y = this.height / 2 + this.noise * this._globalAttenuationFn(i) * (1 / attenuation) * Math.sin(this.F * i - this.phase)
ctx.lineTo(x, y)
}
ctx.stroke()
ctx.restore()
},
详情请参考: