javascript - html5 canvas clearRect 无法清除 android froyo 浏览器中的图像

Question

我尝试使用以下代码根据设备的方向在移动浏览器上旋转 Canvas

e=window.event;
        var w=window.innerWidth||window.screen.availWidth;
        var h=window.innerHeight||window.screen.availHeight;
        var ww = colouringImage.width;
        var hh = colouringImage.height;
        var c = document.createElement('canvas');

        var cntx = c.getContext('2d');
        if(this.canvas.height > h) { 
            c.setAttribute('width', hh);
            c.setAttribute('height',ww);
            cntx.rotate(-90 * Math.PI / 180);
            cntx.drawImage(colouringImage, -ww, 0);
            this.artboard.canvas.width = hh;
            this.artboard.canvas.height = ww;
            this.artboard.clearRect(0,0,hh,ww);
            this.artboard.drawImage(c,0,0);
            c = document.createElement('canvas');
            c.setAttribute('width', hh);
            c.setAttribute('height',ww);
            cntx = c.getContext('2d');
            cntx.rotate(-90 * Math.PI / 180);
            cntx.drawImage(this.canvas,-ww,0);
            this.canvas.width = hh;
            this.canvas.height = ww;
            this.context.clearRect(0,0,hh,ww);
            this.context.drawImage(c,0,0);
         }else if (this.canvas.width > w)
         {
            c.setAttribute('width', ww);
            c.setAttribute('height', hh);
            cntx.drawImage(colouringImage, 0, 0);
            this.artboard.canvas.width= ww;
            this.artboard.canvas.height = hh;
            this.artboard.clearRect(0,0,ww,hh);
            this.artboard.drawImage(c,0,0);
            c = document.createElement('canvas');
            c.setAttribute('width',ww);
            c.setAttribute('height',hh);
            cntx = c.getContext('2d');
            cntx.rotate(90 * Math.PI / 180);
            cntx.drawImage(this.canvas,0,-ww);
            cntx.translate(hh/2,ww/2)
            cntx.rotate(0 * Math.PI / 180);
            this.canvas.width = ww;
            this.canvas.height=hh;
            this.context.clearRect(0,0,ww,hh);
            this.context.drawImage(c,0,0);
         }

我在这里所做的是制作已绘制内容的副本并在临时 Canvas 上旋转它，然后在清除它后将其绘制回 Canvas 上。然而，发生的情况是图像似乎并不清晰。图像是 png 的并且需要是透明的。

还有其他方法可以清除 Canvas 上绘制的图像吗？

Answer 1

通过创建基于内存的 Canvas 并应用必要的旋转，然后使用基于内存的 Canvas 作为源将图像绘制回主 Canvas ，能够准确地旋转 Canvas ，而不会扭曲绘图的坐标。

注意:我目前正在使用为我的项目设计的 2 个 Canvas 。因此，我必须根据需要创建基于电子内存的 Canvas ，以应用所需的任何翻译