Chrome會在canvas元素上以不同方式轉換文本。 為什么？

Question

似乎Chrome強制在canvas元素頂部的文本上進行硬件加速轉換 。

任何人都可以幫我理解這種行為嗎？ 最終，我想在沒有將文本轉換為紋理的情況下在canvas元素上縮放文本。

這個小提琴顯示了這個問題： http ： //jsfiddle.net/Gb6h4/1/

這是代碼：

// Get a reference to the canvas and its context
var $canvas = $("canvas");
var ctx = $canvas[0].getContext('2d');

// Make the canvas fullscreen
var width = $(window).width(),
    height = $(window).height();
$canvas.attr({
    width: width,
    height: height
});

// In Chrome, modifying the canvas context in any way
// seems to force a hardware-accelerated transform
// on the text.
// (The text is scaled as a texture, becoming blurrier.)

// Uncomment the line below and compare the difference.
// ctx.fillStyle = "grey";

// Set up a simple zoom animation on our "Hello!" div
var $div = $(".transformed");
var scale = 1;
setInterval(function () {
    scale += 0.005;
    $div.css({
        transform: "translate(0px, 0px) scale("+scale+")"
    });
}, 16);

在小提琴中，默認情況下，文本按預期進行縮放（ 即 ，非加速CSS變換）。 但是，在與畫布上下文交互后，文本的縮放方式不同（就像在加速轉換中一樣）。

Answer 1

這是CSS轉換如何在Chrome中的合成圖層上工作的副作用。

加速的2D上下文使RenderLayer獲得自己的合成層。 此外， 具有較低z-index的合成兄弟的層也獲得其自己的合成層 。

見 http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

相關錯誤報告 ： https ： //code.google.com/p/chromium/issues/detail？id = 122083 。