Html5 Canvas：旋转的文本在 Google Chrome 上看起来失真
Posted
技术标签:
【中文标题】Html5 Canvas：旋转的文本在 Google Chrome 上看起来失真【英文标题】：Html5 Canvas : Rotated text looks distorted on Google Chrome 【发布时间】：2012-07-19 13:46:59 【问题描述】：我在 html5 画布中旋转了一个文本。它在除谷歌浏览器之外的所有浏览器上看起来都很好。它在 Windows 上的 chrome 上看起来失真。此外，它在 MAC 上看起来不错。为什么会这样？ 我正在使用 Chrome beta 20。是一些 HTML 5 问题还是一些 Google Chrome 或 Windows 错误？我该如何解决这个失真问题？
<!DOCTYPE HTML>
<html>
<head>
<style>
body
margin: 0px;
padding: 0px;
#myCanvas
border: 1px solid #9C9898;
</style>
<script>
window.onload = function()
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "12pt Calibri";
context.rotate(Math.PI/2.5);
context.fillText("Competitive Landcaping!", 450, 100);
;
</script>
</head>
<body>
<canvas id="myCanvas" ></canvas>
</body>
</html>
【问题讨论】：
【参考方案1】：我最近也经历了同样的头疼。简短的回答是，Chrome 在 Windows 上的字体渲染效果很差，而且转换后的字体从那里变得更糟。
要获得更长、更技术性的答案，请查看此帖子：
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
除了尝试选择在 Chrome 中看起来“最差”的字体之外，没有什么可做的。
【讨论】：
以上是关于Html5 Canvas：旋转的文本在 Google Chrome 上看起来失真的主要内容，如果未能解决你的问题，请参考以下文章