1

我只是对 Javascript 和 HTML5 画布进行了一些实验，当我在浏览器（chrome）中看到它时，我意识到它的渲染效果不是很好。在那之后，我在 Internet Explorer 中看到了它，它看起来更加难看。我做了一个小例子： http: //ios.xomz.de/ 我只是在html代码中声明了canvas对象

<canvas id="mycanvas" width="1000px" height="600px"/>

并用

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(200, 200, 600, 200);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.font = "40pt arial";
context.fillStyle = "black";
context.fillText("Hello World!", 220, 380);

例如。

你能解释为什么渲染不好？

4

2 回答 2

2

不要使用“px”，我也建议不要使用自闭合标签：

<canvas id="mycanvas" width="1000" height="600"></canvas>

http://jsfiddle.net/c2KeD/

于 2012-05-03T20:01:34.613 回答
1

这个问题与在基于浮点的网格上绘制对象的方式有关（尤其是垂直和水平线，因此是矩形）。

见那里的解释和模式：http ://canop.org/blog/?p=220

根据对象的大小，您需要为形状使用整数或中间整数坐标和大小，目标是在两个维度上填充完整的像素。

例如 ：

  • 使用中间整数表示细线（一个像素宽度）
  • 对 2 像素宽的线使用整数坐标

（并扩展矩形的逻辑）

在您的情况下，线宽为 5，您可以使用以下方式获得更清晰的矩形：

context.rect(200.5, 200.5, 600, 200);

在这里演示：http: //jsfiddle.net/dystroy/TyNBB/

于 2012-05-03T20:05:11.760 回答