画布上的drawImage（）使颜色饱和并使阿尔法变得混乱
编辑 ： D'OH！ 这个问题的主体大部分是不相关的，因为我发现了我的愚蠢错误，那就是我的画布在计时器上被重画，而我没有清除画图之间的画布。 这具有将任何半透明区域变暗为完全不透明的效果。
现在在做：
mainContext.clearRect ( 0 , 0 , 320 , 480 );
每帧画出之前。
一个仍然存在的小谜团是为什么很多时候将对象绘制在自己身上还会使图像中完全不透明的区域变暗/饱和。
编辑 ：我添加了一张照片。 底部区域显示加载到元素中的图像（它看起来像是我的绘图程序中的图像）。 （img可以在这里下载，为了使屏幕截图更好地适应下面的目的，我调整了它的大小，但是我得到的结果与原始下载的图像保持不变）。顶框框是画布，带有drawImage（ ）来自同一元素。 我不确定现在“降低颜色深度”是否正确。 看起来它正在改变颜色 - 你可以看到在画布上颜色更饱和。 而且它也没有正确处理alpha。 我现在认识到的，我之前描述的“带状”主要发生在原始图像具有较高透明度的区域。
编辑 ：已取得进展。
我看到，如果我在画布上绘制一幅完全不透明的背景图像，那么当我绘制透明的图像时，它就会得到alpha。
我尝试绘制一个填充了颜色的矩形作为背景，但是在绘制图像时仍然存在透明度问题。 似乎有必要在底下绘制不透明的图像。
这听起来很熟悉吗？
我仍然不明白为什么图像颜色在画布内更饱和。 也许这是一个类似于Mac和PC之间颜色差异的伽马校正方法？
我有一个简单的页面，只有一个画布元素。 我加载一个32位.png文件。 我通过两种方式加载文件，一种是创建一个新的Image（）对象并设置它的src，另一种是通过创建一个具有相同源的元素。
页面上的该元素以正确的颜色显示我的图像，很好的阿尔法圆角，等等。
但是当我将图像绘制到画布上时，它似乎失去了颜色深度。 特别是它似乎从32bpp图像减少到8bpp图像（使用一些默认调色板）。 我在梯度区域看到强烈的条纹，并且alpha通道丢失，如在原始图像中平滑的角落的块状像素中看到的那样。
我在Chrome和Firefox（最新版本）中都获得了相同的结果。
我将图像放到画布上
context.drawImage( theImage, 0, 0 );
对于theImage的代码中的Image() ，我已经尝试了Image()对象和<img>元素（已经在页面的其他地方展示了良好版本的图像）。 在这两种情况下，我都得到了相同的结果 - 图像似乎已经降低到8 bpp。
我的画布设置为：
<canvas class="MainCanvas" width="320" height="480"></canvas>
正如我所说，我的图像使用Image（）类加载：
var image = new Image();
image.src = "images/myimage.png";
和一个作为一个元素：
<img class="OtherImage" src="images/myimage.png" />
这几乎是整个事情。
图像在<img>元素中很好地显示的事实似乎表明问题不在于图像或图像的加载，而是使用drawImage()调用或画布本身。
我想知道，如果我的画布或其上下文可能已经设置为这种减少的颜色深度模式，但我无法找到任何关于这种设置。
（我发现为了避免画布在图像上自动缩放，必须使用上面的“width”和“height”属性来设置画布大小，而不是在CSS中。我希望修复这个颜色深度问题是一个类似的问题，我只是无法找到...）
这里有更多的数据给你...
我无法在Win7 +（IE10 | FF21 | Chrome27）中重现您的颜色问题，
关于html画布的注意事项：
画布的自然背景是透明的。 因此，当您在画布上绘制半透明图像时，必须尝试在半透明区域中进行颜色混合，以对抗下面的任何内容（身体背景？）。
当您绘制不透明图像+半透明图像时，您将饱和半透明像素，并从不透明图像的背景添加像素颜色。 我会认为这会导致颜色失真，而不是修复它。 好奇？
在绘制半透明图像之前用不透明（白色？）矩形填充画布将有助于控制图像颜色混合的背景。
无论如何，希望这有助于发现什么是你的图像不良！ :)
这里是代码和小提琴：http://jsfiddle.net/m1erickson/KpAyq/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: white; padding:10px; }
canvas{border:1px solid red;}
img{border:1px solid blue;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var image=document.createElement("img");
image.onload=function(){
ctx.drawImage(image,0,0);
}
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/molecule1.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Left==canvas, Right==img</p>
<canvas id="canvas" width=256 height=275></canvas>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/molecule1.png" width=256 height=275>
</body>
</html>
上一篇: drawImage() on canvas saturates colors and messes up alpha