Chrome会在canvas元素上以不同方式转换文本.为什么?

 4396 发布于 2023-02-07 10:30

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

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有