Question

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

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);
         }

我在这里做的是制作一份最终绘制的副本，然后在临时画布上旋转它，然后在清除后将其绘制回画布上。然而，正在发生的事情似乎并没有清除图像。图像是png，需要透明。

是否有其他方法可以清除画布上绘制的图像？

Answer 1

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

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

html5 canvas clearRect不清除android froyo浏览器中的图像

1 个答案: