【发布时间】：2013-03-17 16:20:37
【问题描述】：
我是HTML5 的一员n00b，我正在使用canvas 来渲染形状、颜色和文本。在我的应用程序中，我有一个 view adapter 动态创建画布，并用内容填充它。这非常有效，除了我的文本被渲染得非常模糊/模糊/拉伸。我看过很多其他帖子，为什么在 CSS 中定义 width 和 height 会导致这个问题，但我在 javascript 中定义了所有内容。
相关代码（查看Fiddle）：
var width = 500;//FIXME:size.w;
var height = 500;//FIXME:size.h;
var canvas = document.createElement("canvas");
//canvas.className="singleUserCanvas";
canvas.width=width;
canvas.height=height;
canvas.border = "3px solid #999999";
canvas.bgcolor = "#999999";
canvas.margin = "(0, 2%, 0, 2%)";
var context = canvas.getContext("2d");
//////////////////
//// SHAPES ////
//////////////////
var left = 0;
//draw zone 1 rect
context.fillStyle = "#8bacbe";
context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);
left = left + canvas.width*1.5/8.5;
//draw zone 2 rect
context.fillStyle = "#ffe381";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);
left = left + canvas.width*2.75/8.5 + 1;
//draw zone 3 rect
context.fillStyle = "#fbbd36";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
left = left + canvas.width*1.25/8.5;
//draw target zone rect
context.fillStyle = "#004880";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);
left = left + canvas.width*0.25/8.5;
//draw zone 4 rect
context.fillStyle = "#f8961d";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
left = left + canvas.width*1.25/8.5 + 1;
//draw zone 5 rect
context.fillStyle = "#8a1002";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);
////////////////
//// TEXT ////
////////////////
//user name
context.fillStyle = "black";
context.font = "bold 18px sans-serif";
context.textAlign = 'right';
context.fillText("User Name", canvas.width, canvas.height*.05);
//AT:
context.font = "bold 12px sans-serif";
context.fillText("AT: 140", canvas.width, canvas.height*.1);
//AB:
context.fillText("AB: 94", canvas.width, canvas.height*.15);
//this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout.
var parent = document.getElementById("layout-content");
parent.appendChild(canvas);<div id="layout-content"></div>我看到的结果（在 Safari 中）比 Fiddle 中显示的更偏斜：
我的
小提琴
我做错了什么？每个文本元素是否需要单独的画布？是字体吗？我需要先在 HTML5 布局中定义画布吗？有错别字吗？我迷路了。
【问题讨论】：
-
好像你没有打电话给
clearRect。 -
这个 polyfill 修复了 HiDPI 浏览器的大部分基本画布操作，这些浏览器不会自动升级（目前 safari 是唯一的）...github.com/jondavidjohn/hidpi-canvas-polyfill
-
我一直在开发一个 JS 框架，用 DIV 马赛克解决画布模糊问题。在内存/cpu js2dx.com
标签： javascript html html5-canvas