Question

我只是尝试了一下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);

例如，

。

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

Answer 1

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

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

http://jsfiddle.net/c2KeD/

Answer 2

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

查看相关说明和架构：http://canop.org/blog/?p=220

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

例如：

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

（并扩展rects的逻辑）

在您的情况下，如果线宽为5，则使用此选项可以获得更清晰的效果：

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

此处示范：http://jsfiddle.net/dystroy/TyNBB/

Javascript Canvas渲染不好

2 个答案: