簡體   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