似乎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变换).但是,在与画布上下文交互后,文本的缩放方式不同(就像在加速转换中一样).