Javascript Canvas 渲染错误答案

【问题标题】：Javascript Canvas bad renderedJavascript Canvas 渲染错误
【发布时间】：2012-05-13 08:40:53
【问题描述】：

我刚刚对 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);

例如。

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

【问题讨论】：

那有什么问题？你期望做哪些它没有做的事情？
顺便说一句：对不起我的英语不好，我来自德国。

标签： javascript html internet-explorer canvas render

【解决方案1】：

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

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

http://jsfiddle.net/c2KeD/

【讨论】：

这没有任何改变。请参阅下文，了解为什么您的版本和 OP 的版本都是模糊的。
这并没有像dystroy所说的那样有帮助

【解决方案2】：

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

请参阅那里以获取解释和架构：http://canop.org/blog/?p=220

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

例如：

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

（并扩展矩形的逻辑）

在你的情况下，线宽为 5，你可以通过使用这个来获得更清晰的矩形：

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

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

【讨论】：

真的很高兴学习它。因为这是您关于 SO 的第一个问题，所以我准确地说您应该投票并接受这个答案:)
是的 :) 接受了它，但要支持我需要更多的声誉......：/
不用担心。当解决方案有效并帮助您时，请养成在评论中说的习惯：我们想知道我们什么时候有用（或没用）。