2

画布与元素

编辑：D'OH！这个问题的主体大部分是无关紧要的，因为我发现了我的愚蠢错误，即我的画布正在计时器上重新绘制，而我没有在两次绘制之间清除画布。这具有将任何半透明区域变暗到完全不透明的效果。

现在做：

mainContext.clearRect ( 0 , 0 , 320 , 480 );

在每帧绘制之前。

仍然存在的一个小谜团是，为什么在其自身上多次绘制对象也会使图像的开始时完全不透明的区域变暗/饱和。

编辑：我添加了一张图片。底部区域显示加载到元素中的图像（看起来就像图像在我的绘画程序中的样子）。（img可以在这里下载。我确实调整了它的大小以使下面的屏幕截图更适合，但我得到了相同的结果，原始下载的图像没有改变。）顶部框架框是画布，带有drawImage（ ) 来自同一个元素。我不确定“减少颜色深度”现在是否是正确的描述。似乎它正在改变颜色——您可以看到画布中的颜色更加饱和。此外，它也没有正确处理 alpha。我之前所说的“带状”

编辑：已经取得进展。

我看到如果我在画布中绘制一个完全不透明的背景图像，然后在其上绘制具有透明度的图像时，它会获得正确的 alpha。

我尝试绘制一个填充有颜色的矩形作为背景，但是在其上绘制图像时仍然存在透明度问题。似乎有必要在下面绘制那个不透明的图像。

这听起来很熟悉吗？

我也不明白为什么画布内的图像颜色更饱和。也许这是一个类似于 Mac 和 PC 之间色差的伽玛校正？

我有一个非常简单的页面，只有一个画布元素。我加载了一个 32 位的 .png 文件。我以两种方式加载文件，一次是创建一个新的 Image() 对象并设置它的 src，一次是创建一个具有相同源的元素。

页面上的那个元素以正确的颜色、漂亮的 alpha 圆角等显示我的图像。

但是当我将图像绘制到画布上时，它似乎失去了颜色深度。特别是它似乎从 32 bpp 图像减少到 8 bpp 图像（使用一些默认调色板）。我在渐变区域看到强烈的条带，并且 alpha 通道丢失，如原始图像中平滑的角落的块状像素化所示。

我在 Chrome 和 Firefox（都是最新版本）中得到了相同的结果。

我将图像放到画布上

context.drawImage( theImage, 0, 0 );

在theImage上面的代码中，我已经尝试了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()调用或画布本身。

我想知道我的画布或其上下文是否可以设置为这种降低的颜色深度模式，但我找不到关于这种设置的任何信息。

（我确实发现为了防止画布在图像上进行令人困惑的自动缩放，有必要使用上面的“宽度”和“高度”属性设置画布大小，而不是在 css 中。我希望修复这个颜色深度问题是一个类似的问题，我只是无法找到......）

4

1 回答 1

3

这里有更多数据给你...

我无法在 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>
于 2013-06-23T14:48:55.040 回答