[英]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.