我原本用createCanvasContext做的动画效果,由于版本问题无法显示,便用Canvas代替。发现以下问题
原来的写法:ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth);(我的宽高相同)
在新的Canvas下绘制,我的动画变形了,然后我就找原因,最终发现坐标宽高都有问题,于是我改成了下面这样,才勉强接近原来的动画样式。dx*3,dy/2,dw*2,dh/2。现在绘制的图片还失真了
ctx.drawImage(anmationData.image, (x - curWidth / 2) * 3, y / 2, curWidth * 2, curWidth / 2);
于是我试了下fillRect方法绘制矩形,使用canvas本身的宽width、高height做参数ctx.fillRect(0, 0, width * 3, height / 2)。宽乘3,高除2,刚好铺满canvas