0

使用している要素：背景画像+画像（形状）+キャンバスのテキスト

問題：キャンバスの背景画像の上にテキストが表示されない。

私が期待したこと：画像の上のテキストを色の背景画像とともに表示します。

私が持っているもの：画像makeShape()機能を削除すると、テキストが表示されます。注意：画像機能には背景色があります。

これはHTMLフォームコードです。

<!doctype html>
<html lang="en">
    <head>
        <title>Canvas text above picture</title>    
        <meta charset="utf-8">
        <style>
            canvas {
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
<form>
<p>
<label for="backgroundColor">Text font:</label>
<select id="backgroundColor">
<option value="white" selected="selected">White</option>
<option value="black">Black</option>
</select>
</p>
<p>
<label for="txt">Text font:</label>
<textarea id="txt" cols="40" rows="3"></textarea>
</p>

<p>
<input type="button" id="previewButton" value="Preview">
</p>
</form>
        <canvas id="myCanvas" width="600" height="500"></canvas>
        <script src="canvasshirt.js"></script>

    </body>
</html>

canvasshirt.jsコード：

window.onload = function() {
    var button = document.getElementById("previewButton");
    button.onclick = previewHandler;
}

function previewHandler() {

    var ca = document.getElementById("myCanvas");
    var co = ca.getContext("2d");

    var bgcolor = document.getElementById("backgroundColor");
    var index = bgcolor.selectedIndex;
    var fgColor = bgcolor[index].value;

    var text = document.getElementById("txt").value;

    drawText(co, text); // ! - this should show text above of drawBckg() function

    drawBckg(ca, co, 600, 500, fgColor); // this draw a background of picture below of text
}


function drawBckg(ca, co, w, h, color)
{
    makeShape(co);

    co.fillStyle = color;
    co.fillRect(0, 0, w, h);
}

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {
        co.drawImage(shapeimg, 170, 10, 233, 350);
    }
}

function drawText(co, text)
{
    co.font = " 13px Arial";
    //co.font = "bold 1em sans-serif";
    co.textAlign = "left";
    co.fillText(text, 20, 40);
}

固定試行...

ソースコードの関数ソートを変更すると、以下のようになります。

drawBckg(ca, co, 600, 500, fgColor);
drawText(co, text);

例の画像（テキストは画像の下にあります）：

青いテキストは、背景がオフになっている<code> makeShape（）</code>画像の下にあります

4

2 に答える 2

1 
drawBckg(ca, co, 600, 500, bgcolor, function(){
    drawText(co, text, fgColor);
});

..。

function drawBckg(ca, co, w, h, color, callback)
{
    makeShape(co, callback);

    co.fillStyle = color;
    co.fillRect(0, 0, w, h);
    callback();  // draw the text here as a fallback if the image doesn't load
}

function makeShape(co, callback)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {
        co.drawImage(shapeimg, 170, 10, 233, 350);
        callback();  // draw the text after drawing the image.
    }
}
于 2012-10-22T15:41:39.103 に答える
0

解決策が見つかりました。

最初にオブジェクトを描画するときは、新しい状態に戻す必要があります。そうしないと、同じ画像に画像が書き込まれます。これは関数co.restore()です：

function drawBckg(ca, co, w, h, color)
{
    co.restore();

    makeShape(co);
}

しかし、私の失敗はonload関数の内部に置くことです：

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {  // <-- remove
    co.drawImage(shapeimg, 170, 10, 233, 350);
    }   // <-- remove
}

これがロードされます。最初にロードされたため、下の画像に表示されます。通常、ロードされたdrawImageへのオンロードを削除します。

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    co.drawImage(shapeimg, 170, 10, 233, 350); // <-- this
}

今それは動作します！

于 2012-10-22T16:06:33.360 に答える