相关疑难解决方法(0)

我发现了一个奇怪的问题getImageData; 在获取图像数据时,图像的透明度似乎被忽略.

由于canvas在获得图像数据之前需要将任何图像绘制到a ,我认为这是一个问题,因为canvas该问题是不透明的.但我错了,因为canvas在drawImage保持透明度时使用作为参数.

这是我加载图像的方式;

var load_image = function(name, url, holder, callback) {
    var img = new Image();
    img.src = url;

    img.addEventListener('load', function(e) {
        var canvas = make_canvas(e.target.width, e.target.height);
        var ctx = canvas.getContext('2d');

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(e.target, 0, 0);

        holder[name] = {canvas: canvas, ctx: ctx};

        delete e.target;

        callback.call();
    }, false);
};

的callback是简单地绘制函数,这将调用draw_image绘制图像.

通常的版本;

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) { …

我有一个画布,背景中有一个大图像,前面有一个较小的圆形图像.我通过使用这样的剪辑实现了这种圆形图像效果

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

但是发生的事情是黑色透明背景从后画布复制而且剪辑无法"剪辑"它.

任何帮助,将不胜感激