Javascript Canvas 渲染错误

Javascript Canvas bad rendered

本文关键字：错误 Canvas Javascript      更新时间：2023-09-26

我刚刚尝试了一下Javascript和HTML5画布，当我在浏览器（chrome）中看到它时，我意识到它的渲染不是很漂亮。之后，我在Internet Explorer中看到了它，在那里它看起来更加粗糙。我举了一个小例子：http://ios.xomz.de/我刚刚在 html 代码中声明了画布对象

<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);

例如。

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

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

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

http://jsfiddle.net/c2KeD/

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

有关解释和架构，请参阅此处：http://canop.org/blog/?p=220

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

例如：

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

（并扩展矩形的逻辑）

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

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

演示：http://jsfiddle.net/dystroy/TyNBB/

相关文章：