1

我在 Safari 画布中绘制文本时遇到问题。它看起来像在这张图片上。这个画布是这样画的：首先是用渐变绘制舞台块，然后是渐变的对话块，在对话块中是绘制文本，在 safari 中看起来很敏捷。

绘制文本的代码：

function drawTimeInTalk(ctx, x, y, text) {
    ctx.fillStyle = '#000';
    ctx.font = "12px arial, sans-serif";
    ctx.textBaseline = 'alphabetic';
    ctx.fillText(text, x, y);
}

绘制舞台渐变块的代码：

function fillGradRect(context, x, y, w, h, start_color, finish_color) {
    var grad = context.createLinearGradient(x, y, x, y + h);
    if (!start_color || !finish_color) {
        start_color = '#cbcbcb';
        finish_color = '#e5e5e5';
    }
    grad.addColorStop(0, start_color);
    grad.addColorStop(1, finish_color);
    context.fillStyle = grad;
    context.fillRect(x, y, w, h);
}

绘制谈话渐变块的代码： 

function roundFillGradRect(context, x, y, w, h, radius, start_color, finish_color) {
    var grad = context.createLinearGradient(x, y, x, y + h);
    if (!start_color || !finish_color) {
        start_color = '#ffffff';
        finish_color = '#eeeeee';
    }
    grad.addColorStop(0, start_color);
    grad.addColorStop(1, finish_color);

    var r = x + w;
    var b = y + h;
    context.beginPath();
    context.fillStyle = grad;
    context.lineWidth = "1";
    context.moveTo(x + radius, y);
    context.lineTo(r - radius, y);
    context.quadraticCurveTo(r, y, r, y + radius);
    context.lineTo(r, y + h - radius);
    context.quadraticCurveTo(r, b, r - radius, b);
    context.lineTo(x + radius, b);
    context.quadraticCurveTo(x, b, x, b - radius);
    context.lineTo(x, y + radius);
    context.quadraticCurveTo(x, y, x + radius, y);
    context.fill();
}
4

2 回答 2

2

尝试以下 javascript 代码cn.style.webkitFontSmoothing="antialiased";，其中 cn 是绘制文本的画布。另请参阅如何在 Lion 上的 Safari 5.1 中解决画布上的字体透明度问题？

于 2013-06-07T20:04:47.017 回答
0

我遇到了同样的错误，但并不总是可以重现（有时画布还可以，有时不行）。在页面中绘制多个复杂且大的画布时会出现该错误。似乎在绘制文本时，它下面的背景不是正确的。我还发现，如果我使用 setTimeout 绘制文本，错误发生的次数会减少（不幸的是，它在任何情况下都不会消失）。

于 2013-06-06T05:16:19.127 回答