1

サファリ キャンバスでのテキストの描画に問題があります。この画像のように見えます。このキャンバスの描画は次のように行われます: 最初にステージ ブロックをグラデーションで描画し、トーク ブロックもグラデーションで描画し、トーク ブロックではテキストを描画しますが、これはサファリでは非常に醜く見えます。

テキストを描画するためのコード:

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

0

同じバグが発生しましたが、常に再現できるとは限りません (キャンバスが正常な場合もあれば、そうでない場合もあります)。このバグは、複数の複雑で大きなキャンバスがページに描画されたときに発生します。テキストを描画すると、その下の背景が正しく表示されないようです。また、setTimeout を使用してテキストを描画すると、バグが発生する回数が減ることもわかりました (残念ながら、いずれにしても消えません)。

于 2013-06-06T05:16:19.127 に答える