HTML Canvas clip и putImageData - PullRequest
Новая
       34

HTML Canvas clip и putImageData

1 голос
/ 11 марта 2011

У меня есть холст с большим изображением на заднем плане и маленьким круглым изображением перед ним.Я достиг этого эффекта круглого изображения с помощью клипа, например 

ctx.save();

ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2, true);   
ctx.closePath();
ctx.clip();

ctx.drawImage(img,x-r,y-r,2*r,2*r);     // draw the image
ctx.restore();

, затем я хочу повернуть круглое изображение, поэтому я использую второй контекст и поворачиваю и перерисовываю как 

backCanvas=document.createElement('canvas');    
backContext=backCanvas.getContext('2d');
backCanvas.width=w;
backCanvas.height=h;

backContext.translate(w/2,h/2);
backContext.rotate(a);

backContext.drawImage(img,-w/2,-h/2,w,h);

var imgData=backContext.getImageData(0,0,w,h);

ctx.save();

ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2, true);   
ctx.closePath();
ctx.clip();
ctx.putImageData(imgData,x,y);

ctx.restore();

Но происходит следующее: черный прозрачный фон копируется с заднего холста, и клип не может его «закрепить».

Любая помощь будет признательна

1 Ответ

6 голосов
/ 14 марта 2011

Согласно спецификациям ,

Текущий путь, матрица преобразования, атрибуты теней, глобальная альфа, регион отсечения и оператор глобальной композиции не должен влиять на методы getImageData () и putImageData ().

В каком случае вы используете дополнительные холст и пиксельные манипуляции с данными?Почему не просто 

ctx.save();

ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);   
ctx.closePath();
ctx.clip();

ctx.translate(x, y);
ctx.drawImage(img, -r, -r, 2*r, 2*r);
// not restoring context here, saving the clipping region and translation matrix

// ... here goes the second part, wherever it is:
ctx.save();
ctx.rotate(a);
ctx.drawImage(img, -r, -r, 2*r, 2*r);
ctx.restore();
...