的Javascript畫布壞呈現

我只是嘗試了一下使用JavaScript和HTML5的畫布，當我看到它在我的瀏覽器（Chrome），我意識到，這不是很漂亮呈現。之後，我在Internet Explorer中看到它，看起來更加令人討厭。我做了一個小例子：http://ios.xomz.de/ 我剛剛宣佈在HTML代碼的Javascript畫布壞呈現

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

例如。

你能解釋爲什麼渲染不好嗎？

來源

2012-05-03 Matthias Herzog

這是什麼問題？你期望做什麼，它沒有做什麼？ – pollirrata

順便說一句：對不起，我的英語不好，我是來自德國。 –

你的問題是什麼？ – apsillers

此問題與對象的方式繪製在一個基於浮動的網格（特別是垂直和水平線以及因此反面）。

作出解釋和架構看到有：http://canop.org/blog/?p=220

根據您的對象的大小，你需要使用的整數或整數中旬座標和尺寸的形狀，其目標是填補完整像素兩個維度。

例如：

使用中間整數爲細線（一個像素寬度）
使用一個整數座標爲2個像素寬的線

（和延伸recept的邏輯）

在你的情況下，使用5的線寬，你可以通過使用下面的代碼來得到更銳利的反應：

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

這裏的示範：http://jsfiddle.net/dystroy/TyNBB/

來源

2012-05-03 20:05:11

謝謝你，這真的解決我的問題:) –

真的很高興去學習它。由於這是你的第一個問題的話，我確切你應該給予好評，並接受這個答案:) –

啊:)接受，但要給予好評，我需要更多的聲譽...：/ –

不要使用「PX」，也是我建議不使用自動關閉標籤：

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

http://jsfiddle.net/c2KeD/

來源

2012-05-03 20:01:34

這不會改變。請參閱下面的解釋爲什麼你的版本和OP的模糊。 –

這不會幫助像dystroy說 –

的Javascript畫布壞呈現

回答

相關問題