繁体   English   中英

html5 canvas clearRect无法在Android Froyo浏览器中清除图像

[英]html5 canvas clearRect doesn't clear images in android froyo browser

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

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,需要透明。

还有其他清除在画布上绘制的图像的方法吗?

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

注意:我目前正在使用2个专为我的项目设计的画布。 因此,我必须根据需要创建基于ememory的画布,以应用所需的任何翻译

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM